利用css简单实现一个跑马灯效果

<style type="text/css">
	div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{
		margin:0;
		padding:0;
	}
	.box{
		width: 350px;
		height: 150px;
		border: 10px solid rgba(29,6,253,1);
		margin: 30px;
		text-align: center;
		transition: all 3s;
		overflow: hidden;
		position: relative;
	}
	.box a{
		display: block;
		text-decoration: none;
		color: black;
		font-weight: bold;
		font-size: 30px;
		line-height: 150px;
	}
	.box:hover{
		border: 10px solid rgba(29,6,253,0);
	}
	.box .one:nth-child(1){
		width: 350px;
		height: 10px;
		background: pink;
		position: absolute;
		top: 0;
		left: -350px;
	}
	.box .one:nth-child(2){
		width: 350px;
		height: 10px;
		background: pink;
		position: absolute;
		bottom: 0;
		right: -350px;
	}
	.box .one:nth-child(3){
		width: 10px;
		height: 160px;
		background: pink;
		position: absolute;
		bottom: -160px;
		left: 0;
	}
	.box .one:nth-child(4){
		width: 10px;
		height: 160px;
		background: pink;
		position: absolute;
		top: -160px;
		right: 0;
	}
	.box:hover .one:nth-child(1){
		transform: translateX(350px);
		transition: all 2s;
	}
	.box:hover .one:nth-child(2){
		transform: translateX(-350px);
		transition: all 2s;
	}
	.box:hover .one:nth-child(3){
		transform: translateY(-160px);
		transition: all 3s;
	}
	.box:hover .one:nth-child(4){
		transform: translateY(160px);
		transition: all 3s;
	}
</style>

<div class="box">
	<div class="one"></div>
	<div class="one"></div>
	<div class="one"></div>
	<div class="one"></div>
	<a href="#">鹏仔先生</a>
</div>

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓