广告
广告
广告
html/css/javascript您现在的位置是:主页 > html/css/javascript >

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

2023-12-29 08:15:23html/css/javascript 160人已围观

直接上代码

<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>

代码下载

点击下载效果代码

 


扫码添加技术微信【解决问题,仅需10元起】

专注中小企业网站建设、网站安全15年。
熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。
承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症,您有任何网站问题都可联系我们技术人员微信。
➥ 可淘宝担保交易,安全无风险

广告
广告
技术微信