css3如何实现这种动画效果

trust2018
  • 1.1k
回复
阅读 1.6k
4 个回答

我也写了个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;
  }
}

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

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

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

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

宣传栏