CSS3-点扩散、光晕、闪点效果

CSS3-点扩散、光晕、闪点效果

html:

<div class="container">
<div class="one">
<p></p>
<span></span>
</div>
<div class="two">
<p></p>
<span></span>
</div>
<div class="three">
<p></p>
<span></span>
</div>
<div class="four">
<p></p>
<span></span>
</div>
</div>

css:

*{
margin: 0;
padding: 0;
list-style: none;
font-style: normal;
}
html,body{
width: 100%;
height: 100%;
}
.container{
width: 760px;
height: 620px;
position: absolute;
top: 60px;
left: 420px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}
/* 绘制小点*/
.container div{
width: 4px;
height: 4px;
border: 6px solid #009fd9;
border-radius: 50%;
position: relative;
}
.container p, .container span{
width: 4px;
height: 4px;
border-radius: 50%;
box-shadow: 0px 0px 1px #009fd9;
margin: 0;
position: absolute;
animation: myfirst 1.5s infinite;
}
.container span{
animation-delay: 0.8s;
}
.container .one{
top: 100px;
left: 600px;
}
.container .two{
background: #a2a9b4;
top: 350px;
left: 300px;
}
.container .three{
background: lightblue;
top: 220px;
left: 450px;
}
.container .four{
background: pink;
top: 330px;
left: 130px;
}
@keyframes myfirst{
10%{
transform: scale(1);
}
100%{
transform: scale(8);
}
}

说明：

p和span都会产生css3动画效果，span的动画，延迟0.8s只才执行。 animation-delay: 0.8s;