我们在写动画的时候，会见到由原点向四周发散出光芒，我在阿里云上见到这个动画，就把它复制下来，方便自己以后写。
效果图：
代码如下：
<div class="main-img" id="serve-img-area">
<div class="point-area">
<p class="point-name" style="position: absolute; top: 30px; left: 50px;">华东</p>
<a class="point point-dot"></a>
<div class="point point-10"></div>
<div class="point point-40"></div>
<div class="point point-shadow point-80"></div>
</div>
</div>
css代码：
@-webkit-keyframes ripple{
0%{opacity:0;-webkit-transform:scale(0.1,0.1); }
5%{ opacity:1; }
100%{ opacity:0; -webkit-transform:scale(1)}
}
@-moz-keyframes ripple{
0%{opacity:0;-moz-transform:scale(0.1,0.1); }
5%{ opacity:1; }
100%{ opacity:0; -moz-transform:scale(1)}
}
@-o-keyframes ripple{
0%{opacity:0;-o-transform:scale(0.1,0.1); }
5%{ opacity:1; }
100%{ opacity:0; -o-transform:scale(1)}
}
@keyframes ripple{
0%{opacity:0;-webkit-transform:scale(0.1,0.1);
-moz-transform:scale(0.1,0.1);
-ms-transform:scale(0.1,0.1);
transform:scale(0.1,0.1); }
5%{ opacity:1; }
100%{ opacity:0;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);}
}
#serve-img-area.paused .point-area .point-10:after，#serve-img-area.paused .point-area .point-20:after，
#serve-img-area.paused .point-area .point-80:after
{
animation-play-state: paused;
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
/* 定义范围*/
#serve-img-area .point-area {
text-align: center;
position: relative;
width: 150px;
height: 150px;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
/* 定义圆点*/
#serve-img-area .point-area .point {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 10px;
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
background: transparent;
}
/* 定义圆扩散的阴影*/
#serve-img-area .point-area .point-shadow:after {
-webkit-box-shadow: inset 0 0 5em rgba(0, 205, 236, 0.16);
-moz-box-shadow: inset 0 0 5em rgba(0, 205, 236, 0.16);
box-shadow: inset 0 0 5em rgba(0, 205, 236, 0.16);
}
#serve-img-area .point-area .point-dot {
z-index: 1;
background-color: #6AD7E9;
border: 1px solid rgba(0, 205, 236, 0.37);
}
#serve-img-area .point-area .point-10 {
width: 100%;
height: 100%;
}
#serve-img-area .point-area .point-10:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #00cdec;
opacity: 0;
-webkit-animation: ripple 4500ms ease-out 225ms infinite;
-moz-animation: ripple 4500ms ease-out 225ms infinite;
-o-animation: ripple 4500ms ease-out 225ms infinite;
animation: ripple 4500ms ease-out 225ms infinite;
}
#serve-img-area .point-area .point-40 {
width: 100%;
height: 100%;
}
#serve-img-area .point-area .point-40:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #00cdec;
opacity: 0;
-webkit-animation: ripple 4500ms ease-out 900ms infinite;
-moz-animation: ripple 4500ms ease-out 900ms infinite;
-o-animation: ripple 4500ms ease-out 900ms infinite;
animation: ripple 4500ms ease-out 900ms infinite;
}
#serve-img-area .point-area .point-80 {
width: 100%;
height: 100%;
}
#serve-img-area .point-area .point-80:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #00cdec;
opacity: 0;
-webkit-animation: ripple 4500ms ease-out 1800ms infinite;
-moz-animation: ripple 4500ms ease-out 1800ms infinite;
-o-animation: ripple 4500ms ease-out 1800ms infinite;
animation: ripple 4500ms ease-out 1800ms infinite;
}
注：animation-play-state属性规定动画正在运行的还是暂停
语法：animation-play-state:paused/running
paused:规定动画已经暂停
running：规定动画正在运行
