您的位置：首页 > Web前端 > CSS

幽灵按钮的制作

2017-04-01 17:19 344 查看

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;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 酷炫前端样式

相关文章推荐

新的分享

章节导航