css3做个第一个动画，主要点在box-shadow和background的变化，虽然不难，但是还是有一定的技巧性的！备注下
html
<div class="loading">
<div class="show_01 show"></div>
<div class="show_02 show"></div>
<div class="show_03 show"></div>
<div class="show_04 show"></div>
<div class="show_05 show"></div>
</div>
.loading{ width: 100%; height: 100%; background: #014a9c; position: relative;}
.show{ width: 50px; height: 50px; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -25px; animation:sploosh 4s ease-in-out both infinite; -webkit-animation:sploosh 4s ease-in-out both infinite; );
background: rgba(66, 166, 223, 0.7);}
.show_02{ -webkit-animation-delay: -0.8s; animation-delay: -0.8s;}
.show_03{ -webkit-animation-delay: -1.6s; animation-delay: -1.6s;}
.show_04{ -webkit-animation-delay: -2.4s; animation-delay: -2.4s;}
.show_05{ -webkit-animation-delay: -3.2s; animation-delay: -3.2s;}
@-webkit-keyframes sploosh {
0% {
box-shadow: 0 0 0 0 rgba(66, 166, 223, 0.7);
background: rgba(66, 166, 223, 0.7);
}
100% {
box-shadow: 0 0 0 250px rgba(66, 166, 223, 0);
background: rgba(66, 166, 223, 0);
}
}
@keyframes sploosh {
0% {
box-shadow: 0 0 0 0 rgba(66, 166, 223, 0.7);
background: rgba(66, 166, 223, 0.7);
}
100% {
box-shadow: 0 0 0 250px rgba(66, 166, 223, 0);
background: rgba(66, 166, 223, 0);
}
}