没有SVG可以实现这种悬停效果

Question

我想在没有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>

Answer 1

不完全喜欢但几乎就是

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="container">
    <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你正在寻找这样的东西吗？

＆＃13;

＆＃13;

@keyframes width{
	0%{width:100%; height:0%;}
	50%{width:10%; height:10%;}
	100%{width:0%; height:100%;}
}
@keyframes height{
	0%{width:0%; height:100%;}
	50%{width:10%; height:10%;}
	100%{width:100%; height:0%;}
}
.effect{float:left; margin:15px; position:relative;}
.effect .content{ top:0px; left:0px; right:0px; bottom:0px; background-color:transparent; color:#000;}
.effect div{ width:100%; height:100%; position:absolute;
animation-fill-mode:forwards;}

.effect .top{top:-1px; left:-1px; border-top:1px solid #aaa; border-left:1px solid #aaa;}
.effect .bottom{bottom:-1px; right:-1px; border-bottom:1px solid #aaa; border-right:1px solid #aaa;}
.effect .left{left:-1px; bottom:-1px; border-bottom:1px solid #aaa; border-left:1px solid #aaa;}
.effect .right{top:-1px; right:-1px; border-right:1px solid #aaa; border-top:1px solid #aaa;}

.effect:hover .top{animation:width 0.7s ease-in 0s 1;}
.effect:hover .bottom{animation:width 0.7s ease-in 0s 1;}
.effect:hover .left{animation:height 0.7s ease-in 0s 1;}
.effect:hover .right{animation:height 0.7s ease-in 0s 1;}

.effect:not(:hover) .top{animation:height 0.7s ease-in 0s 1;}
.effect:not(:hover) .bottom{animation:height 0.7s ease-in 0s 1;}
.effect:not(:hover) .left{animation:width 0.7s ease-in 0s 1;}
.effect:not(:hover) .right{animation:width 0.7s ease-in 0s 1;}

＆＃13;

<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>

<div class="content"></div>


</div>

<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>

<div class="content"></div>


</div>
<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>

<div class="content"></div>


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

是的，虽然我现在无法为你编写CSS。这只是一个使用问题：悬停以更改该元素的高度和宽度或填充或边框。使用过渡可获得平滑效果。你根本不需要动画或SVG。

Answer 4

CSS

＆＃13;

＆＃13;

.test {
  display: inline-block;
  border-radius: 0px;
  border: 1px solid pink;
  transition: all 1s;
}
.test:hover {
  border-radius: 0 20px;
  border: 20px solid rgba(0, 0, 0, 0.5);
  background-color: purple;
  color: yellow;
  padding: 50px;
  font-size: 30px;
}

＆＃13;

<div class="test">hover me for fun and exitment</div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

.box {
  fill: #4a2;
  stroke: #412;
  stroke-width: 1;
  transition: all 1s;
}
.box:hover {
  stroke-width: 5;
  stroke: #22a;
  fill: red;
}

＆＃13;

<svg width="200px" height="200px" viewBox="0 0 100 100">
  <rect class="box" x="20" y="50" width="50" height="30" />
</svg>

＆＃13;

＆＃13;

＆＃13;