<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
<title>幽灵按钮</title>
<link rel="stylesheet" type="text/css" href="styleq.css"/>
</head>
<body>
<div class="content">
<div class="box box-mission">
<span class="icon"></span>
<a href="#"class="button">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
资金安全
</a>
</div>
<div class="box box-play">
<span class="icon"></span>
<a href="#"class="button">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
闪电交易
</a>
</div>
<div class="box box-touch">
<span class="icon"></span>
<a href="#"class="button">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
灵活融资
</a>
</div><div class="box box-name">
<span class="icon"></span>
<a href="#"class="button">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
贴心管家<br>
</a>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background: mediumvioletred;
}
.content{
width: 1000px;
height:800px;
margin: 80px auto;
}
@media screen and (min-width:980px){
.content .box{
width: 160px;
height: 200px;
margin:0px 40px;
float:left ;
}
}
@media screen and (min-width:600px){
.content .box{
width: 160px;
height: 200px;
}
}
.box-mission .icon{
display:block;
width:115px;
height:111px;
background: url(./images/a.png) no-repeat;
margin: 0px auto;
transition:all 0.2s;
-webkit-transition:all 0.2s;
-o-transition:all 0.2s;
-moz-transition:all 0.2s;
}
.box-play .icon{
display:block;
width:115px;
height:111px;
background: url(./images/b.png) no-repeat;
margin: 0px auto;
transition:all 0.2s;
-webkit-transition:all 0.2s;
-o-transition:all 0.2s;
-moz-transition:all 0.2s;
}
.box-touch .icon{
display:block;
width:115px;
height:111px;
background: url(./images/c.png) no-repeat;
margin: 0px auto;
transition:all 0.2s;
-webkit-transition:all 0.2s;
-o-transition:all 0.2s;
-moz-transition:all 0.2s;
}
.box-name .icon{
display:block;
width:115px;
height:111px;
background: url(./images/d.png) no-repeat;
margin: 0px auto;
transition:all 0.5s;
-webkit-transition:all 0.2s;
-o-transition:all 0.2s;
-moz-transition:all 0.2s;
}
.box-mission .icon:hover{
transform:scale(1.2) rotate(360deg);
-webkit-transform:scale(1.2) rotate(360deg);//谷歌浏览器
-o-transform:scale(1.2) rotate(360deg); //苹果浏览器
-moz-transform:scale(1.2) rotate(360deg);//火狐浏览器
}
.box-play .icon:hover{
transform:scale(1.2) rotate(360deg);
-webkit-transform:scale(1.2) rotate(360deg);//谷歌浏览器
-o-transform:scale(1.2) rotate(360deg); //苹果浏览器
-moz-transform:scale(1.2) rotate(360deg);//火狐浏览器
}
.box-touch .icon:hover{
transform:scale(1.2) rotate(360deg);
-webkit-transform:scale(1.2) rotate(360deg);//谷歌浏览器
-o-transform:scale(1.2) rotate(360deg); //苹果浏览器
-moz-transform:scale(1.2) rotate(360deg);//火狐浏览器
}
.box-name .icon:hover{
transform:scale(1.2) rotate(360deg);
-webkit-transform:scale(1.2) rotate(360deg);//谷歌浏览器
-o-transform:scale(1.2) rotate(360deg); //苹果浏览器
-moz-transform:scale(1.2) rotate(360deg);//火狐浏览器
}
.box .button{
display: block;
width:156px;
height:45px;
line-height: 45px;
margin: 20px auto;
background:url(./images/01.png) no-repeat 100px center;
font-family: "微软雅黑";
font-weight: bolder;
color: #2ecc71;
text-decoration: none;
padding-left: 20px;
border:2px solid rgba(255,255,255,0.8);
transition: all 0.2s ease;
position: relative;
}
.box .button:hover{
background-position: 140px center;
border:2px solid rgba(255,255,255,1);
}
.box .line{
background-color:red;
}
.box .line-top{
width:0px;
height:2px;
display: block;
position:absolute;
top:-2px;
left:-60px;
transition: all 0.2s ease;
}
.box .button:hover .line-top{
width:180px;
left:-2px;
}
.box .line-bottom{
width:0px;
height:2px;
display: block;
position:absolute;
bottom:-2px;
right: -60px;
transition: all 0.2s ease;
}
.box .button:hover .line-bottom{
width:180px;
left:-2px;
}
.box .line-left{
width:2px;
height:0px;
display: block;
position:absolute;
bottom:-60px;
left:-2px;
transition: all 0.2s ease;
}
.box .button:hover .line-left{
height:49px;
bottom:-2px;
}
.box .line-right{
width:2px;
height:0px;
display: block;
top:-60px;
position:absolute;
right:-2px;
transition: all 0.2s ease;
}
.box .button:hover .line-right{
height: 49px;
top:-2px;
}
