css3实现无缝轮播图效果

最近用纯css3实现了一下无缝轮播图效果

html：

<div class="banner w">
		<ul class="banner_con">
			<li><img src="./img/banner1.webp" /></li>
			<li><img src="./img/banner2.webp" /></li>
			<li><img src="./img/banner3.webp" /></li>
			<li><img src="./img/banner4.webp" /></li>
			<li><img src="./img/banner5.webp" /></li>
			<li><img src="./img/banner1.webp" /></li>
		</ul>
		<ul class="point">
			<li class="on"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
           

关键的css:

/*图片动画:*/
@keyframes banner_move{
	0%,15%{
		left: 0;
	}
	20%,35%{
		left: -100%;
	}
	40%,55%{
		left: -200%;
	}
	60%,75%{
		left: -300%;
	}
	80%,95%{
		left: -400%;
	}
	100%{
		left: -500%;
	}
}
/*调用*/
.banner_con{
	width: 600%;
	display: flex;
	position: absolute;
	top: 0;
	animation: banner_move 15s linear infinite;//调用动画
}
           

/*指示点动画：*/
@keyframes point_move{
	0%,15%{
		left: 0;
	}
	20%,35%{
		left: 20%;
	}
	40%,55%{
		left: 40%;
	}
	60%,75%{
		left: 60%;
	}
	80%,100%{
		left: 80%;
	}
}
/*调用*/
.point li.on{
	position: absolute;
	top: 0;
	left: 0;	
	background-color: #E93B3D;
	animation: point_move 15s linear infinite;//调用动画
}
           

效果：

纯html+css3实现轮播

源码：下载