纯css代码让网站大banner图片向左循环滚动

直接上代码

<style>
*{margin:0;padding:0;}
.banslick{width:100%;position:relative;overflow:hidden;max-height:500px;}
.huadong{position: absolute;left: 0;top: 0;height: 100%;}
.huadong2{position: absolute;left: 0;top: 0;height: 100%;transform: translateX(100%);}
.banslickbox{position: relative;width: 100%;animation: donghua 30s linear infinite;-webkit-animation: donghua 80s linear infinite;}
@keyframes donghua
{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-100%);
	}
}
@-webkit-keyframes
{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-100%);
	}
} 
</style>
<div class="banslick">
	<div class="banslickbox">
		<!-- pcxian pc端banner -->
		<img src="images/20190214095849_5c64cb59c3b1c.jpg" class="huadong" />
		<img src="images/20190214095849_5c64cb59c3b1c.jpg" class="huadong2" />
		<img src="images/banbg.png" class="banbg" />
	</div>
</div>

代码下载

点击下载效果代码