脉动圆圈的 CSS 动画

Question

我需要帮助在这个动画中创建脉冲圆圈的东西，我认为我已经非常接近它的其余部分，也对代码的任何其他帮助表示赞赏！ 我尝试过的渐变效果并没有使它产生脉冲，但我认为颜色很好。

我必须制作的动画

到目前为止我的代码

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #050210;
}

.circle {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(#fb5dad, #55fb9f, #b97aff);
    animation: my-animation 2s linear infinite;
}

@keyframes my-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.circle span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(#fb5dad, #55fb9f, #b97aff);
    animation-name: my-animation;
    animation-duration: infinite;
    animation-timing-function: linear;
}

.circle span:nth-child(1) {
    filter: blur(5px);

}

.circle span:nth-child(2) {
    filter: blur(10px);
}

.circle span:nth-child(3) {
    filter: blur(25px);
}

.circle span:nth-child(4) {
    filter: blur(50px);
}

.circle::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: radial-gradient(black, rgb(11, 11, 88));
    border-radius: 50%;


}

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

尝试使用二维变换比例梯度进行操作，但没有成功。

Answer 1

我看到你的作业被接受了，但我仍然想展示解决方案。

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #050210;
}

.circle {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(#fb5dad, #55fb9f, #b97aff);
    animation: my-animation 2s linear infinite;
}

@keyframes my-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.circle span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(#fb5dad, #55fb9f, #b97aff);
    animation-name: my-animation;
    animation-duration: infinite;
    animation-timing-function: linear;
}

.circle span:nth-child(1) {
    filter: blur(5px);

}

.circle span:nth-child(2) {
    filter: blur(10px);
}

.circle span:nth-child(3) {
    filter: blur(25px);
}

.circle span:nth-child(4) {
    filter: blur(50px);
}

.circle::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: radial-gradient(black, rgb(11, 11, 88));
    border-radius: 50%;
}

.pulse {
  background: rgba(11, 11, 88, .4);
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  position: fixed;
  border-radius: 100%;
  animation: 1s pulse infinite;
}

@keyframes pulse {
  0% {
    scale: 0;
    background: rgba(11, 11, 88, .4);
  }
  100% {
    scale: 1;
    background: rgba(11, 11, 88, .0);
  }
}

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