前端 - 如何使用CSS制作视频中的圆环扩散效果？有大佬知道不？

Question

这种效果怎么通过css实现？

这个圆环扩散的效果我做出来了，但是没有达到这种视频中效果

Answer 1

做这个很简单,调整到和ui一模一样很难,
建议还是ui切图吧,lottie,关键帧动画,哪怕gif

Answer 2

您可以使用CSS的border-radius属性以及transform: scale()属性来制作一个圆环扩散效果。以下是一个简单的示例：

HTML:

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

CSS:

.circle {  width: 200px;  height: 200px;  background: #000;  border-radius: 50%;  position: relative;  overflow: hidden;}.circle::before {  content: "";  position: absolute;  top: -50%;  left: -50%;  width: 400%;  height: 400%;  background: #000;  border-radius: 50%;  transform: scale(0.5);  transform-origin: center;  animation: scaleUp 2s ease-in-out infinite;}@keyframes scaleUp {  0% { transform: scale(0.5); }  100% { transform: scale(1); }}

这个示例中，我们创建了一个黑色的圆，然后在这个圆内部再创建一个稍大的圆，并通过scale()函数将其缩放到原始大小的一半。然后，我们使用CSS动画将这个内部圆逐渐放大到原始大小，从而创建出圆环扩散的效果。您可以根据需要调整颜色、大小和动画的持续时间等属性。