如何用css实现无缝轮播图切换?
发布时间:12/01 来源:未知 浏览:
关键词:
css实现无缝轮播图切换的办法:第一使用animation属性设定要绑定到选中器的keyframes的名称、完成动画所花费的时间、动画的速度曲线、动画的播放次数;然后使用@keyframes规则创立轮播动画,指定每个关键帧中图片的定位样式。
本教程操纵环境:windows7系统、css3版,该办法适用于所有品牌电脑。
(引荐教程:CSS视频教程)
使用CSS3实现:利用animation属性+@keyframes规则
(实现一张一张的轮播,肉眼只看见一张图片)
HTML部分比力简便,两个div下包着几个img标签;为了实现无缝轮播,留意第一张图片要与最后一张图片雷同;
<div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img src="img/child.jpg"/> <img src="img/girl.jpg"/> <img src="img/milk.jpg"/> <img src="img/cup.jpg"/> <img src="img/dog.jpg"/> <img src="img/beatuy.jpg"/> </div> </div>
最外层div设定ovflow:hidden;position: relative;既然最外层div设定了position: relative;所之内层div需要设定position: absolute;使得其运动相对父元素而言;
CSS代码如下:
.out{ width: 200px; height: 100px; overflow: hidden; position: relative; } .imgs { width: 1400px; height: 100px; position: absolute; animation: ppt 10s linear infinite; } img { float: left; width: 200px; height: 100px; } @keyframes ppt { 0% { left: 0px } 20% { left: -250px } 40% { left: -500px } 60% { left: -750px } 80% { left: -1000px } 100% { left: -1200px } }
这样图片就可以轮播了。
但是鼠标放上去的时候图片还是不断在轮播的,假如我们想让鼠标放在图片上时,轮播休止,或者显现一些信息,我们需要加上:hover;设定动画的状态,代码很简约:如下
.out:hover .imgs{ animation-play-state:paused; }
这样我们的轮播结果就出来啦;