幽灵按钮的制作

最新推荐文章于 2021-06-24 17:21:57 发布

七月天小姐

最新推荐文章于 2021-06-24 17:21:57 发布

阅读量495

点赞数 1

分类专栏： html 文章标签：酷炫前端样式

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>幽灵按钮</title>
</head>
<body>
<div class="row">
<div class="box box-mession">
<span class="icon"></span>
<a class="button">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-button"></span>
MESSION
</a>
</div>
<div class="box box-play">
<span class="icon"></span>
<a class="button">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-button"></span>
PLAY
</a>
</div>
<div class="box box-touch">
<span class="icon"></span>
<a class="button">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-button"></span>
TOUCH
</a>
</div>
</div>
</body>
</html>

CSS:

*{margin:0; padding:0;}
body{background:#333;}
.row{
width:1000px;
height:400px;
margin:0 auto;
}
.box{
width:300px;
height:300px;
float:left;
margin-left:25px;
}
.box .icon{
width:200px;
height:200px;
display:block;
margin:0 auto;
transition:all 0.2s;
}
.box-mession .icon{
background: url("../images/1.png") no-repeat;
}

.box-play .icon{
background: url("../images/2.png") no-repeat;
}

.box-touch .icon{
background: url("../images/3.png") no-repeat;
}

.box .icon:hover{
transform:scale(1.2) rotate(360deg);
}

.button{
width:150px;
height:40px;
display:block;
margin:0 auto;
color:#2ecc71;
line-height:40px;
padding-left:10px;
font-weight:bolder;
font-family:"微软雅黑";
position:relative;
border:2px solid rgba(255, 255, 255, 0.8);
background:url("../images/04.png") no-repeat 100px;
transition:all 0.3s; /*过度效果（在0.3秒内完成）*/
}
.button:hover{
background-position:120px center; /*背景图片定位*/
border:2px solid rgba(255, 255, 255, 1);
}

.line{
display:block;
background:#fff;
position:absolute;
transition:all 0.2s;
}
/*顶部线条*/
.line-top{
width:0px;
height:2px;
top:-2px;
left:-100%;
}
.button:hover .line-top{
width:164px;
left:-2px;
}

/*底部线条*/
.line-button{
width:0px;
height:2px;
bottom:-2px;
right:-100%;
}
.button:hover .line-button{
width:164px;
right:-2px;
}

/*左边线条*/
.line-left{
width:2px;
height:0px;
left:-2px;
top:-100%;
}
.button:hover .line-left{
height:44px;
top:-2px;
}

/*右边线条*/
.line-right{
width:2px;
height:0px;
right:-2px;
bottom:-120%;
}
.button:hover .line-right{
height:44px;
bottom:-2px;
}