CSS3 制作的圖片滾動效果

發(fā)布時間：2021-04-14 17:13:01 作者：Dudley Storey

這篇文章主要介紹了CSS3 制作的圖片滾動效果，幫助大家更好的理解和學習使用CSS3，感興趣的朋友可以了解下

實現(xiàn)效果

實現(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 制作的圖片滾動效果的詳細內(nèi)容，更多關(guān)于CSS3 圖片滾動的資料請關(guān)注腳本之家其它相關(guān)文章！

Tag：CSS3 圖片滾動

相關(guān)文章

jQuery css3實現(xiàn)響應式圖文卡片滾動輪播特效
這是一款jquery和css3響應式卡片圖文列表輪播布局?；趏wl-carousel圖片滾動插件，通過bootstrap制作響應式卡片布局，組成炫酷的圖文卡片輪播特效。感興趣的朋友前來下載
2019-05-15
基于css3制作wow.js網(wǎng)頁滾動圖片元素動畫效果
WOW.js基于css3動畫庫屬性制作頁面在向下滾動的時候，有些元素會產(chǎn)生細小的動畫效果。有需要的朋友可以直接下載使用，本段代碼可以在各個網(wǎng)頁使用
2018-04-25
純css3實現(xiàn)的表情圖片滾動旋轉(zhuǎn)動畫特效源碼
這是一款基于純css3實現(xiàn)的表情圖片滾動旋轉(zhuǎn)動畫特效源碼。畫面上的表情圖片呈現(xiàn)間歇的滾動動作，伴隨著滾動的同時表情圖片呈現(xiàn)出驚訝、微笑、悲傷等多種表情，另外還會有眨
2017-04-10
html5+css3技術(shù)實現(xiàn)3D網(wǎng)頁內(nèi)容上下左右四個方向滾動切換特效
3D幻燈片:一個HTML5+CSS3技術(shù)的3D網(wǎng)頁內(nèi)容切換特效;灰色背景，右下角會出現(xiàn)一個控制按鈕，可上下左右控制網(wǎng)頁向四個方向滾動切換，視覺集中在頁面中央
2013-01-18
用CSS3+jQuery實現(xiàn)的垂直滾動圖片菜單效果
jQuery+Css3實現(xiàn)的垂直圖片菜單效果，菜單垂直顯示，鼠標滑過菜單，菜單滾動顯示并出現(xiàn)菜單提示信息，非常cool
2012-11-20
用CSS3+jQuery來實現(xiàn)的滾動圖片菜單效果
jQuery+CSS3實現(xiàn)的圖片菜單效果，菜單項以圖片的方式展示，鼠標滑過菜單，菜單會隨之滾動顯示，并顯示提示信息，非常cool
2012-11-20