我们使用图片轮播,基本都是通过JS来完成,现在轮播插件也是很多可供我们选择.其效果也是有所不一样.看大家的需求而定.
今天我们用CSS来简单的实现图片轮播的效果.其效果的原理,还是利用CSS3中的动画来完成.
首先我们写好基本的结构和效果,这一点应该前端工程师写得比较多了,就是轮播的布局.图片我们是使用京东首页的轮播图片.
其次就是用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.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.
