我正在尝试创建没有SVG的东西吗?可能吗 ?
Demo
Fiddle
.hover {
background: salmon;
text-align: center;
width: 70px;
height: 50px;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}
.hover:hover {
border: 2px solid grey;
}
<div class="hover">hover me</div>
最佳答案
不完全一样,但几乎在那里
.container {
display:inline-block;
overflow:hidden;
position:relative;
}
.container div {
position:relative;
width:200px;
height:200px;
background:grey;
transition:.5s all;
}
.container:before {
content:"";
position:absolute;
top:198px;
left:0;
width:200px;
height:2px;
z-index:2;
background:orange;
transition:.5s all;
transition-delay:.5s;
}
.container:after {
content:"";
position:absolute;
top:0;
right:00px;
width:2px;
height:200px;
background:orange;
transition:.5s all;
}
.container div:after {
top:0px;
content:"";
position:absolute;
width:200px;
height:2px;
background:orange;
transition:.5s all;
}
.container div:before {
top:0px;
left:0px;
content:"";
position:absolute;
width:2px;
height:200px;
background:orange;
transition:.5s all;
transition-delay:.5s;
}
.container:hover:after{
height:0;
}
.container:hover:before{
width:0;
}
.container div:hover:after {
width:0;
}
.container div:hover:before {
height:0;
}
<div class="container">
<div></div>
</div>