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實作輪播

源碼：下載下傳