css3如何实现圆环扩散的动画效果？

• Z时代
• 2024-01-10
• 分类：技术分享

参考地址

css3如何实现这样的圆环扩散效果

回答

动画里设置阴影效果，差不多这样吧

.spot {
    height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 5px rgba(234, 54, 75, 0.8);
  background: rgba(234, 54, 75, 0.8);
  animation: localShine 1.5s linear infinite;
}
@keyframes localShine {
  from {
    box-shadow: 0 0 0 0 rgba(234, 54, 75, 0.8);
  }
  to {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
}

以上是 css3如何实现圆环扩散的动画效果？ 的全部内容， 来源链接： utcz.com/a/26075.html