参考地址
css3如何实现这样的圆环扩散效果
看下这个demo
###我也写了个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层次的动画