CSS實現圖片輪播效果
我們使用圖片輪播,基本都是通過JS來完成,現在輪播插件也是很多可供我們選擇.其效果也是有所不一樣.看大家的需求而定.
今天我們用CSS來簡單的實現圖片輪播的效果.其效果的原理,還是利用CSS3中的動畫來完成.
首先我們寫好基本的結構和效果,這一點應該前端工程師寫得比較多了,就是輪播的布局.圖片我們是使用京東首頁的輪播圖片.
代碼名稱
<div id="slider">
<ul>
<li>
<a href="">
<img src="https://simg.open-open.com/show/ceed8ba9e93f0c75b18dbd990c5fb029.jpg" alt="">
</a>
</li>
<li>
<a href=""> <img src="https://simg.open-open.com/show/f97faabdc7f20ff0b3bb857c6adad3e6.jpg" alt=""> </a>
</li>
<li>
<a href=""> <img src="https://simg.open-open.com/show/5bf4f8efa2bf3c7e831959d9bf472cc5.jpg" alt=""> </a>
</li>
</ul>
</div>
其次就是用CSS來完成頁面的布局效果.#slider就是一個視窗,相當于你呆在房間,然后向外望去,這個視窗就是窗戶.而窗外的景色是從下往上走的.那代碼就是
代碼名稱
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
#slider{
position: relative;
width: 730px;
height: 454px;
overflow: hidden;
}
#slider ul{
position: relative;
animation: anims 10s infinite ease-in-out alternate;
}
OK,結構效果弄好了,現在我們加入必要的動畫.剛布局里就知道,動畫是從上往下走的,那自然我們想到的是position的處理.
代碼名稱
@keyframes anims {
0%{
top:0;
}
50%{
top: -454px;
}
100%{
top: -908px;
}
}
動畫代碼是不是很簡單.代碼結構中UL就是一個畫布,畫布利用這個動畫,循環的從上往下,從下往上來回替換.效果沒有展示完(圖片GIF過大).大家可以試試DEMO.
本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=191 ,歡迎大家傳播與分享.
來自： http://www.wutongwei.com/front/infor_showone.tweb?id=191