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

鹏仔工作室

于 2019-03-08 10:22:29 发布

阅读量2.8k

点赞数 1

分类专栏：前端文章标签： css

前端共享博客 http://sharedbk.com

本文链接：https://blog.csdn.net/tianpeng1996/article/details/88342229

版权

前端专栏收录该内容

105 篇文章 2 订阅

订阅专栏

共享博客

详情 www.sharedblog.cn/?post=67

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>

HTML代码

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