如何使用css实现无缝轮播图切换

小编给大家分享一下如何使用css实现无缝轮播图切换，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

css实现无缝轮播图切换的方法：首先使用animation属性设置要绑定到选择器的keyframes的名称、完成动画所花费的时间、动画的速度曲线、动画的播放次数；然后使用@keyframes规则创建轮播动画，指定每个关键帧中图片的定位样式。

使用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; }

这样我们的轮播效果就出来啦；

看完了这篇文章，相信你对如何使用css实现无缝轮播图切换有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！