CSS中,圖片滾動(dòng)是一個(gè)很常見的需求,特別是在網(wǎng)頁設(shè)計(jì)中,常常需要用到滾動(dòng)圖片來展示產(chǎn)品、新聞或者廣告等。
下面是一個(gè)簡單的網(wǎng)頁圖片滾動(dòng)示例代碼:
<div class="scroll" > <ul class="scroll_list"> <li class="scroll_item"><img src="image1.jpg"></li> <li class="scroll_item"><img src="image2.jpg"></li> <li class="scroll_item"><img src="image3.jpg"></li> </ul> </div> <style> .scroll{ overflow: hidden; width: 800px; height: 400px; } .scroll_list{ margin: 0; padding: 0; width: 2400px; list-style: none; position: relative; left: 0; animation: scroll 15s linear infinite; } .scroll_item{ float: left; width: 800px; height: 400px; } @keyframes scroll{ 0%{left: 0;} 100%{left: -1600px;} } </style>
上面的代碼中,我們首先定義了一個(gè)div容器,并將其overflow屬性設(shè)為hidden,以隱藏滾動(dòng)出來的圖片。然后我們?cè)O(shè)置了一個(gè)ul列表容器,并將其position屬性設(shè)為relative,以便我們?cè)诙x子元素中使用position:absolute屬性。
在CSS中,我們還定義了一個(gè)名為scroll_list的類,將它的left屬性從0%到100%分別進(jìn)行動(dòng)畫滾動(dòng)。
最后用keyframes屬性定義了動(dòng)畫效果,使得滾動(dòng)圖片循環(huán)播放。這個(gè)動(dòng)畫效果持續(xù)時(shí)間為15秒。
除此之外,我們還定義了滾動(dòng)圖片的寬度、高度和海報(bào)尺寸等具體樣式。
這套圖片滾動(dòng)代碼可以讓你輕松地在網(wǎng)頁上實(shí)現(xiàn)滾動(dòng)圖片的展示,讓你的網(wǎng)站更加醒目動(dòng)感。