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.

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

将伪元素绝对定位在实心圆后面
将其大小设置为小于实心圆，这可以使用 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>

Answer 2

这可能有帮助

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

.outer-circle:hover {
  width: 36px;
    height: 36px;
  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;
}

Answer 3

试试这个代码..我认为从现在开始它会好很多..

css

body {
  background: #eee;
}
.outer-circle {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    transition: 0.5s all ease 0s;
}
.outer-circle:hover {
  width: 34px;
  height: 34px;
  transition: 0.5s all ease 0s;
}
.outer-circle:hover .inner-circle {
  border-color: #000;
}
.inner-circle {
    position: relative;
    width: 100%;
    height: 100%;
    border:2px solid brown;
    border-radius: 100%;
    background: brown;
}

CSS 圆形元素的边框过渡

CSS border transition for rounded element

css

css-transitions