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 ,欢迎大家传播与分享.
</div>来自： http://www.wutongwei.com/front/infor_showone.tweb?id=191