<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>幽灵按钮</title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*选择器{属性：属性值}*/
body{background-color: black;}
#bigbox{
width:900px;
height: 300px;
/*background: pink;*/
/*元素左右居中*/
margin: 150px auto 0;
}
.minBox{
width:300px;
height: 100%;
float: left;
}
.minBox span{
display: block;/*span转换元素类型，变为盒子*/
width: 100%;
height: 250px;
text-align: center;
}
.minBox span img{
/*过渡动画*/
transition: all 1s;
margin-top:50px;
}
.minBox a{
/*相对定位，根据自身位置进行定位，原有位置保留*/
/*给自身相对定位*/
position: relative;
display: block;
width: 250px;
height: 30px;
/*边框：宽高 实线 白色*/
border: 2px solid white;
text-align: center;/*文本居中*/
line-height: 30px;/*文本垂直居中*/
color: green;
font-size: 20px;
font-weight:900;/*字体加粗*/
text-decoration:none;/*清除下划线*/
box-sizing: border-box;/*盒子模型，在宽高内计算边框*/
margin: 0 auto;
background: url(img/allow.png) no-repeat 200px center;/*不重复，y轴居中*/
transition: all 1s;
}
.minBox span:hover img{
/*允许对图片平移、旋转、缩放*/
transform: rotate(360deg);
}
.minBox a:hover{
background: url(img/allow.png) no-repeat 220px center;
}
.minBox a p{
background: white;
transition: all 1s;
/*绝对定位,根据相邻有定位的父元素进行定位*/
/*如果相邻父元素没有定位，则根据body进行定位*/
position: absolute;
}
.minBox a .p1{
width:0;
height: 2px;
top:-2px;
left: -100%;
}
.minBox a:hover .p1{
width:100%;
left:0;
}
.minBox a .p2{
width: 2px;
height: 0;
top:-100%;
right: -2px;
}
.minBox a:hover .p2{
height: 100%;
top:0%;
}
.minBox a .p3{
width:0;
height: 2px;
bottom:-2px;
right: -100%;
}
.minBox a:hover .p3{
width:100%;
right:0;
}
.minBox a .p4{
width: 2px;
height: 0;
bottom:-100%;
left: -2px;
}
.minBox a:hover .p4{
height: 100%;
bottom:0%;
}
</style>
</head>
<body>
<!--div为块级元素-->
<!--行内元素-->
<!--行内块元素-->
<div id="bigbox">
<div class="minBox">
<span>
<img src="img/mission.png" alt="text" />
</span>
<a href="#">
mission
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
<p class="p4"></p>
</a>
</div>
<div class="minBox">
<span>
<img src="img/play.png" alt="text" />
</span>
<a href="#">
play
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
<p class="p4"></p>
</a>
</div>
<div class="minBox">
<span>
<img src="img/touch.png" alt="text" />
</span>
<a href="#">
touch
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
<p class="p4"></p>
</a>
</div>
</div>
</body>
</html>效果图
所需图片素材：
链接：https://pan.baidu.com/s/1JC_xKnWaamnj-718azQd3w
提取码：h5ti
