圆形元素的 CSS 边框过渡

Question

我试图在将鼠标悬停在圆形元素上时实现过渡效果。

效果应该由内而外。

body {
  background: #eee;
}
.outer-circle {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 100%;
}

.outer-circle:hover {
  width: 34px;
    height: 34px;
  border: 2px solid #000;
  transition: border 300ms;
    transition-timing-function: cubic-bezier(0.64, 0.04, 0.35, 1);
}

.inner-circle {
    position: relative;
    width: 32px;
    height: 32px;
    margin: 1px;
    border:1px solid #999;
    border-radius: 100%;
    background: brown;
}

<div class="outer-circle">
  <div class="inner-circle">
  </div>
</div>

如何获取这个动画？

Answer 1

之所以你的例子看起来有点破，是因为外圈是文档流的一部分:每当你改变 border-radius 时，都会导致整个布局重新绘制。您需要的是将其从文档流中取出，例如使用 position: absolute。

事实上，您并不真的需要两个元素:一个就足够了。实心圆应该是主要元素，而伪元素只是带有边框的圆的缩小版。如您所知，伪元素将是外圈。诀窍是:

1. 绝对定位伪元素在实心圆的后面
2. 将其大小设置为小于实心圆，这可以使用 scale(0.5) 或任何可确保隐藏轮廓的任意值来完成。

然后，当元素悬停时，您可以根据需要放大伪元素，方法是将转换设置为 scale(1)。

使用此方法的优点是您不会转换边界宽度、宽度或高度等像素精确值，并且您可以将该转换卸载到 GPU。

body {
  background: #eee;
}

.circle {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 100%;
}

.circle {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 1px;
  border-radius: 100%;
  background: brown;
}

.circle::before {
  /* Final appearance of the outer circle */
  width: 36px;
  height: 36px;
  border: 2px solid #000;
  border-radius: 100%;
  
  /* Position it absolutely and center it relative to the circle */
  /* Remember to scale it down, so it's hidden nicely in the back */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  
  content: '';
  z-index: -1;
  
  transition: all 300ms;
  transition-timing-function: cubic-bezier(0.64, 0.04, 0.35, 1);
}

.circle:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

<div class="circle">
</div>