主要利用css3 animation纽哥， 在0 ~ 100% 過(guò)渡中讓box-shadow漸變（box-shadow只需要設(shè)置blur 和spread）
HTML:
<div class="wrapper">
<div class="bg"></div>
<div class="circle"></div>
</div>
CSS:
.wrapper {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ff6633;
position: relative;
}
.bg {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 8px 6px #fff;
}
50% {
box-shadow: 0 0 8px 6px #ff6633;
}
100% {
box-shadow: 0 0 8px 6px #fff;
}
}
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #efefef;
}
預(yù)覽效果入如下：
test1.gif
