CSS是一種非常強(qiáng)大的網(wǎng)頁設(shè)計(jì)語言,它可以用于實(shí)現(xiàn)各種各樣的效果。其中,圖片循環(huán)滾動(dòng)就是一種比較常見的效果。在本文中,我們將介紹如何使用CSS實(shí)現(xiàn)兩張圖片循環(huán)滾動(dòng)。
首先,我們需要給圖片容器設(shè)置一個(gè)固定的寬度和高度,并設(shè)置overflow為hidden,以便隱藏超出容器大小的部分。然后,我們需要在這個(gè)容器中放置兩張圖片,分別為img1和img2。圖片的位置可以通過設(shè)置position屬性為absolute,并通過top和left屬性來定位。
<style> .img-container { position: relative; width: 500px; height: 300px; overflow: hidden; } .img-container img { position: absolute; top: 0; left: 0; width: 500px; height: 300px; animation: slide 10s infinite; } @keyframes slide { 0% { transform: translateX(0); } 50% { transform: translateX(-500px); } 100% { transform: translateX(0); } } </style> <div class="img-container"> <img src="img1.jpg" alt="img1"> <img src="img2.jpg" alt="img2"> </div>
在上述代碼中,我們使用了CSS的animation屬性,通過定義一個(gè)名為slide的動(dòng)畫來實(shí)現(xiàn)圖片的滾動(dòng)。這個(gè)動(dòng)畫通過設(shè)置transform屬性的translateX值來實(shí)現(xiàn)水平方向的移動(dòng)。圖片容器中的img標(biāo)簽分別應(yīng)用了這個(gè)動(dòng)畫,并設(shè)置animation的duration為10秒,iteration-count為infinite,即無限循環(huán)播放。
通過以上的CSS代碼,我們就可以輕松地實(shí)現(xiàn)兩張圖片的循環(huán)滾動(dòng)效果了。你可以嘗試修改容器大小、圖片數(shù)量、滾動(dòng)速度等參數(shù),來實(shí)現(xiàn)不同的效果。