将CSS动画应用到正方形上（动态改变边框大小和正方形大小）。

Question

截图 附带 解释了所有关于想要的效果。我想把边框的宽度从4px减少到3px，再减少到2px，我不想应用easy-inease out效果。现在，当我悬停的时候，它看起来像是 这个. 我想通过第一张截图中显示的效果来改变这个框。

我把下面的代码贴出来，供大家参考。

&__link {
    @include font-text(default, menuitem);
    @include token(font-size, sidenav, default);
    background-image: none;
    text-transform: uppercase;
    padding: 1rem;
    margin: 0;

    &:before {
      position: absolute;
      right: 1.3rem;
      top: 2rem;
      width: 1px;
      content: '';
      background: #fff;
      height: 100%;
      opacity: 0.3;
    }

    &:after {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      content: '';
      width: 10px;
      height: 10px;
      outline: 1px solid #fff;
      top: -1px;
    }

    &:hover {
      @include font-text(default, menuitem);
      @include token(font-size, sidenav, hover);
      font-weight: 600;
      margin: 0;
      padding: 1rem;

      &:after {
        background: white;
        box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
      }
    }
  }

&:after代表框的代码。先谢谢你了。

Answer 1

<div class="box">
</div>

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  text-decoration: none;
  background-color: white;
  background-image: linear-gradient(#000, #000);
  border: 1px solid black;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0% 0%;
  transition: .5s;
}
.box:hover {
  background-size: 95% 95%;
}

我不太明白这个问题，但是这个可以做后面的截图动画。

Answer 2

试试吧--你需要设置动画，因为你想为一个事件（悬停）设置几种情况。

替换这些块

&:after {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  content: '';
  width: 0px;
  height: 0px;
  top: -1px;
  background: white;
  border: 7px solid #fff;
}

&:hover:after {
    animation: sqr .3s linear;
    animation-fill-mode: forwards;
  }


@keyframes sqr {
30%{
border: 5.5px solid #fff;
width: 3px;    height: 3px;    
background: black;
}   
80%{   
border: 4px solid #fff;    
width: 6px;    
height: 6px;    
background: black;
} 
100%{    
border: 3px solid #fff;    
width: 8px;   
height: 8px;    
transform: scale(1.5);    
box-shadow: 0 0 5px 2px #fff;    
background: black;  
}  
}