<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background:#000;
}
.wrap{
widows: 840px;
margin:50px auto;
height:300px;
}
.wrap a {
float:left;
width: 180px;
height:180px;
margin:10px;
border:2px solid #ccc;
position: relative;
}
.wrap a .top{
display:inline-block;
position: absolute;
left:-2px;
top:-2px;
width: 0px;
height:2px;
background:#ff0000;
transition:.5s;
}
.wrap a .right{
display:inline-block;
position: absolute;
right:-2px;
bottom:0;
width: 2px;
height:0;
background:#ff0000;
transition:.5s;
}
.wrap a .bottom{
display:inline-block;
position: absolute;
right:-2px;
bottom:-2px;
width: 0;
height:2px;
background:#ff0000;
transition:.5s;
}
.wrap a .left{
display:inline-block;
position: absolute;
left:-2px;
top:0;
width: 2px;
height:0;
background:#ff0000;
transition:.5s;
}
.wrap a:hover .top,.wrap a:hover .bottom{
width:102%;
transition: .5s;
}
.wrap a:hover .right, .wrap a:hover .left{
height:101%;
transition: .5s
}
</style>
</head>
<body>
<div class="wrap">
<a href="#">
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</a>
<a href="#">
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</a>
<a href="#">
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</a>
<a href="#">
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</a>
</div>
</body>
</html>
css-div边框动画
猜你喜欢
转载自blog.csdn.net/weixin_40002964/article/details/88100257
今日推荐
周排行