HTML5 幽灵按钮
补充一点知识点：css 通过hover控制其他元素样式：
<html>
<body>
<style>
#a:hover {color : #FFFF00;}
#a:hover > #b:first-child{color : #FF0000;}
#a:hover > #b{color : #FF00FF;}
#a:hover + #c{color : #00FF00;}
#a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
<div id='b'>元素2</div>
<div id='b'>元素2</div>
</div>
<div id='c'>元素3
<div id='b'>元素2</div>
</div>
</body>
</html>
其他知识点都是前面学过的，直接附上代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>幽灵按钮</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
<link rel="stylesheet" type="text/css" href="icomoon/style.css"/>
</head>
<body>
<div class="outbox">
<div class="box box-a">
<span class="icon icon-html-five2"></span>
<div class="button">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span>按钮1</span><span class="icon-arrow-right2">
</div>
</div>
<div class="box box-b">
<span class="icon icon-power"></span>
<div class="button">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span>按钮2</span><span class="icon-arrow-right2">
</div>
</div>
<div class="box box-c">
<span class="icon icon-compass"></span>
<div class="button">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span>按钮3</span><span class="icon-arrow-right2">
</div>
</div>
</div>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
}
.outbox{
width: 960px;
height: 500px;
margin: 50px auto;
background: lightslategray;
}
.box{
margin: 0 50px;
width: 220px;
height: 400px;
float: left;
font-family: "微软雅黑";
font-size: 18px;
font-weight: bolder;
color: lightsteelblue;
line-height: 50px;
}
.box:active{
animation: box 1s;
animation-fill-mode: forwards;
}
@keyframes box{
from{transform: rotate(0deg) scale(1);}
to{transform: rotate(360deg) scale(1.2);}
}
.box > .button{
margin: 20px auto;
padding-left: 20px;
width: 150px;
height: 50px;
border: 2px solid rgba(255,255,255,0.5);
position: relative;
transition: all .2s ease;
}
.button:hover{
border: 2px solid #fff;
color: white;
}
.box .icon-arrow-right2{
margin-left: 50px;
}
.button:hover > .icon-arrow-right2{
margin-left: 60px;
}
.box > .icon{
margin: 50px auto;
display: block;
width: 200px;
height: 200px;
text-align: center;
font-size: 150px;
color: #FFF;
transition: all .2s;
}
.box > .icon-html-five2:hover{animation: iconfive .7s 3 linear;animation-fill-mode: forwards;}
@keyframes iconfive{
0%{transform: scale(1) rotate(0deg);}
25%{transform: scale(1.2) rotate(45deg);}
50%{transform: scale(1.2) rotate(0deg);}
75%{transform: scale(1.2) rotate(-45deg);}
100%{transform: scale(1) rotate(0deg);}
}
.box > .icon-power:hover{animation: iconpower .17s 4;animation-fill-mode: forwards;}
@keyframes iconpower{
from{transform: scale(1) translateY(0px);}
to{transform: scale(1.2) translateY(50px);}
}
.box > .icon-compass:hover{animation: iconcompass 1s 1;animation-fill-mode: forwards;}
@keyframes iconcompass{
from{transform: scale(1) translateY(0px) translateX(0px) rotate(0deg);}
to{transform: scale(0.5) translateY(-100px) translateX(100px) rotate(720deg);}
}
.box > .button > .line{
display: block;
background: white;
position: absolute;
transition: all .2s ease;
}
.box > .button > .line-top{
width: 0px;
height: 2px;
top: -2px;
left: -100%;
}
.box > .button > .line-bottom{
width: 0px;
height: 2px;
bottom: -2px;
right: -100%;
}
.box > .button > .line-left{
width: 2px;
height: 0px;
left: -2px;
bottom: -100%;
}
.box > .button > .line-right{
width: 2px;
height: 0px;
right: -2px;
top: -100%;
}
.button:hover > .line-top{
width: 174px;
left: -2px;
}
.button:hover > .line-bottom{
width: 174px;
right: -2px;
}
.button:hover > .line-left{
height: 54px;
bottom: -2px;
}
.button:hover > .line-right{
height: 54px;
top: -2px;
}
效果图：
