css 如何设置从中间到笔划的圆的动画

qhhrdooz  于 2023-03-14  发布在  其他
关注(0)|答案(4)|浏览(115)

我想用CSS实现下面的动画:

  • 圆从中心缩放到100%,因此整个圆都用颜色填充
  • 然后再次从中心填充变形为一个围绕圆圈的笔划

我认为最好的方法是使用before或after伪类,这样你就可以对圆进行动画了。我想我遇到的问题是父类上的动画也在伪类中使用。
如果有更好的方法来实现这一点,我愿意接受建议:)
https://codepen.io/Caspert/pen/JjaMgKe

超文本标记语言:<div class="circle"></div>
南部非洲支助中心:

@keyframes parentFromCenter {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes childFromCenter {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.circle {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  border-radius: 50vh;
  overflow: hidden;
  position: relative;
  background: black;
  animation: parentFromCenter 1s ease-in;

  &::before {
    content: "";
    height: 90%;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: inherit;
    animation: childFromCenter 1s ease-in;
  }
}
uoifb46i

uoifb46i1#

如果你想让内圈成为一个剪切块,并看到u后面的内容,可以使用box-shadow达到同样的效果。这是更新

.circle2 {
 --circle-size: 200px;
 --fill-circle: calc(circle-size / 2);
 --stroke-size: 10px;
 width: var(--circle-size);
 height: var(--circle-size);
 background-color: pink;
 border-radius: 100vh;
 background: transparent;
 box-shadow: inset 0 0 0 var(--circle-size) lightblue;
 animation: parentFromCenter 1s ease-in forwards, shadow 1s 1s ease-in forwards; 
}

我也更新了代码笔:https://codepen.io/raul-rogojan/pen/dyqJxVB

x3naxklr

x3naxklr2#

我会把我的两分钱...

.circle{
  width: 10px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  box-sizing: border-box;
  
  animation: expanding 2s linear infinite;
  transform: translate(-50%, -50%);
  left: 100px;
  top: 100px;
  position: absolute;
}

@keyframes expanding{
  0%{
    width: 10px;
    border: 6px solid blue;
  }
  50%{
    width: 200px;
    border: 102px solid blue;
  }
  100%{
    width: 200px;
    border: 5px solid blue;
  }
}
<div class="circle">

</div>
vc9ivgsu

vc9ivgsu3#

使用伪元素进行样式设置似乎是个好主意--但我会更进一步,将动画样式与实际元素完全分离。
这个代码片段保持元素本身的完整尺寸,并动画显示before和after伪元素,使其从比例0增长到比例1。
before伪元素是黑色的,并且立即开始增长。after伪元素是白色的,并且等待1秒后才开始增长。

body {
  /* just for demo */
  width: 100vw;
  height: 100vh;
}

@keyframes grow {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.circle {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  border-radius: 50vh;
  overflow: hidden;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle::before,
.circle::after {
  content: '';
  position: absolute;
  animation: grow 1s ease-in forwards;
  border-radius: inherit;
  transform: scale(0);
  z-index: -1;
}

.circle::before {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: black;
}

.circle::after {
  height: 90%;
  width: 90%;
  top: 5%;
  left: 5%;
  background: white;
  animation-delay: 1s;
}
<div class="circle"></div>
628mspwn

628mspwn4#

你不需要使用伪元素,你可以在圆圈里再加一个div,然后像这样给每个div加上动画:

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

另外,将forwards关键字添加到动画中,以便元素保留动画中的样式。
下面是一个例子:https://codepen.io/raul-rogojan/pen/dyqJxVB

相关问题