H5的动画效果，实例代码如下
*{padding: 0; margin: 0}
em{font-style: normal; }
@-webkit-keyframes newsBtn{
0%{
-webkit-transform:scale(0);
opacity: 0.1;
}
100%{
-webkit-transform:scale(1.5);
opacity: 1;
}
}
.box{width: 100%; margin: 0 auto; }
.warm{width: 78px; height: 78px; margin: 0 auto; }
.warm em{width: 78px; height: 78px; display: block; background: rgba(189,0,0,0.6); text-align: center; line-height: 78px; border-radius: 39px; color: #fff; position: absolute; top:0; left: 0; z-index: 2}
.warm span{width: 78px; height: 78px; display: block; background: rgba(189,0,0,0.3); position: absolute; top: 0; left: 0; border-radius: 39px; opacity: 0.1; -webkit-transform: scale(0); }
.warm span:nth-of-type(1){animation:newsBtn 2s infinite alternate; }
.warm span:nth-of-type(2){animation:newsBtn 2s .5s infinite alternate; }
.warm span:nth-of-type(3){animation:newsBtn 2s 1s infinite alternate; }
精彩活动
【波纹动画制作】转载于:https://www.cnblogs.com/-zhuli/p/5587551.html
