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)文章！
相關(guān)文章
jQuery css3實現(xiàn)響應(yīng)式圖文卡片滾動輪播特效
這是一款jquery和css3響應(yīng)式卡片圖文列表輪播布局?；趏wl-carousel圖片滾動插件，通過bootstrap制作響應(yīng)式卡片布局，組成炫酷的圖文卡片輪播特效。感興趣的朋友前來下載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)菜單提示信息，非常cool2012-11-20
用CSS3+jQuery來實現(xiàn)的滾動圖片菜單效果
jQuery+CSS3實現(xiàn)的圖片菜單效果，菜單項以圖片的方式展示，鼠標滑過菜單，菜單會隨之滾動顯示，并顯示提示信息，非常cool2012-11-20
