暑假实验室学习的一个小知识,幽灵按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>线条移动</title>
</head>
<style>
.contain{
margin: 100px 0 0 200px;
height: 500px;
width: 500px;
border: 2px solid #000;
background-color: antiquewhite;
position: relative;
}
.contain:hover ._right{width: 50px; right: 0px;}
.contain:hover ._bottom{height: 50px; bottom: 0px;}
.contain:hover ._left{width: 50px; left: 0px;}
.contain:hover ._top{height: 50px; top: 0px;}
.contain span{position: absolute; background: #000; transition:all 0.6s}
.contain ._top{top:152px; left: 352px;height: 0; width: 2px;}
.contain ._bottom{bottom: 152px; right: 348px; height: 0; width: 2px;}
.contain ._left{top: 150px; left: 160px; width: 0; height: 2px;}
.contain ._right{bottom: 146px; right: 160px; width: 0; height: 2px;}
.contain img{
border: 2px solid #000;
margin: 150px;
}
</style>
<body>
<div class="contain">
<span class="_top"></span>
<span class="_right"></span>
<span class="_bottom"></span>
<span class="_left"></span>
<img src="img/2.jpg/" alt="1">
</div>
</body>
</html>