css3如何实现这种动画效果

Question

参考地址
css3如何实现这样的圆环扩散效果

Answer 1

我也写了个demo

看你需要哪种吧

<div class="boxw" >
  <div class="box">41.4</div>
</div>

.box {
  margin: 180px auto;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: #ffd300;
  animation: app 2s infinite;
  text-align: center;
  color: #1a1a1a;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  font-size: 16px;
}
.boxw {
  margin: 180px auto;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: #ffd300;
}
@keyframes app {
  100% {
    -webkit-transform: scale(1.3, 1.3);
    -moz-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    -o-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    opacity: 0;
  }
}

Answer 2

纯样式写这个吃力不讨好，不如找线上网站生成 SVG

补充：毕竟看样子你需要的并不是单层的扩散阴影效果，
看样子是环状的3层次的动画

Answer 3

看下这个demo

Answer 4

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

.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);
  }
}