0

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

效果应该是由内而外的。

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>

要实现的动画

如何获得这个动画？

4

3 回答 3

0

您的示例看起来有点破损的原因是因为外圈是文档流的一部分：每当您更改边框半径时，都会导致重新绘制整个布局。您需要将其从文档流中取出，例如使用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>

于 2019-09-04T11:36:41.183 回答
0

这可能会有所帮助

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;
}
于 2019-09-04T11:36:55.677 回答
0

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

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;
}
于 2019-09-04T11:41:18.107 回答