CSS实现图片轮播效果_html/css_WEB-ITnose

我们使用图片轮播,基本都是通过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.

编程的人正在在线培训

"前端编程开发","后端开发","移动开发"等,

需要学习的可以加入群或者微信留言

原创内容,转载请注明出处.

公众微信号:bianchengderen

QQ群: 186659233

欢迎大家传播与分享.

融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.