CSS3 制作的圖片滾動(dòng)效果
發(fā)布時(shí)間：2021-04-14 17:13:01 作者：Dudley Storey 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS3 制作的圖片滾動(dòng)效果，幫助大家更好的理解和學(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;
}
其他
對(duì)切換速度有要求的修改CSS3最后的時(shí)間即可
以上就是CSS3 制作的圖片滾動(dòng)效果的詳細(xì)內(nèi)容，更多關(guān)于CSS3 圖片滾動(dòng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
jQuery css3實(shí)現(xiàn)響應(yīng)式圖文卡片滾動(dòng)輪播特效
這是一款jquery和css3響應(yīng)式卡片圖文列表輪播布局?；趏wl-carousel圖片滾動(dòng)插件，通過(guò)bootstrap制作響應(yīng)式卡片布局，組成炫酷的圖文卡片輪播特效。感興趣的朋友前來(lái)下載2019-05-15
基于css3制作wow.js網(wǎng)頁(yè)滾動(dòng)圖片元素動(dòng)畫(huà)效果
WOW.js基于css3動(dòng)畫(huà)庫(kù)屬性制作頁(yè)面在向下滾動(dòng)的時(shí)候，有些元素會(huì)產(chǎn)生細(xì)小的動(dòng)畫(huà)效果。有需要的朋友可以直接下載使用，本段代碼可以在各個(gè)網(wǎng)頁(yè)使用2018-04-25
純css3實(shí)現(xiàn)的表情圖片滾動(dòng)旋轉(zhuǎn)動(dòng)畫(huà)特效源碼
這是一款基于純css3實(shí)現(xiàn)的表情圖片滾動(dòng)旋轉(zhuǎn)動(dòng)畫(huà)特效源碼。畫(huà)面上的表情圖片呈現(xiàn)間歇的滾動(dòng)動(dòng)作，伴隨著滾動(dòng)的同時(shí)表情圖片呈現(xiàn)出驚訝、微笑、悲傷等多種表情，另外還會(huì)有眨2017-04-10
html5+css3技術(shù)實(shí)現(xiàn)3D網(wǎng)頁(yè)內(nèi)容上下左右四個(gè)方向滾動(dòng)切換特效
3D幻燈片:一個(gè)HTML5+CSS3技術(shù)的3D網(wǎng)頁(yè)內(nèi)容切換特效;灰色背景，右下角會(huì)出現(xiàn)一個(gè)控制按鈕，可上下左右控制網(wǎng)頁(yè)向四個(gè)方向滾動(dòng)切換，視覺(jué)集中在頁(yè)面中央2013-01-18
用CSS3+jQuery實(shí)現(xiàn)的垂直滾動(dòng)圖片菜單效果
jQuery+Css3實(shí)現(xiàn)的垂直圖片菜單效果，菜單垂直顯示，鼠標(biāo)滑過(guò)菜單，菜單滾動(dòng)顯示并出現(xiàn)菜單提示信息，非常cool2012-11-20
用CSS3+jQuery來(lái)實(shí)現(xiàn)的滾動(dòng)圖片菜單效果
jQuery+CSS3實(shí)現(xiàn)的圖片菜單效果，菜單項(xiàng)以圖片的方式展示，鼠標(biāo)滑過(guò)菜單，菜單會(huì)隨之滾動(dòng)顯示，并顯示提示信息，非常cool2012-11-20
