亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3 制作的圖片滾動效果

  發(fā)布時間：2021-04-14 17:13:01   作者：Dudley Storey   我要評論
這篇文章主要介紹了CSS3 制作的圖片滾動效果，幫助大家更好的理解和學(xué)習(xí)使用CSS3，感興趣的朋友可以了解下

實(shí)現(xiàn)效果

實(shí)現(xiàn)代碼

html

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>

CSS3

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 5s slidy infinite; 
}

其他

對切換速度有要求的修改CSS3最后的時間即可

以上就是CSS3 制作的圖片滾動效果的詳細(xì)內(nèi)容，更多關(guān)于CSS3 圖片滾動的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論