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

2024年04月12日前端 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>

本文链接：http://so.lmcjl.com/news/1896/

展开阅读全文

上一篇：股权转让的合同模板免费下一篇：转让个人店铺合同范本大全