css3 animation实现动态波浪

首先效果如图

animation 属性是一个用于设置css动画的简写属性。

<style type="text/css">
.wave{
        width:100px;
        height:100px;
        border-radius: 100px;
        background:#06c no-repeat center center;
        background-size:100%;
        animation: wave 3s -2s linear infinite;
        position: relative;
    }
    .wave::before,.wave::after{
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 100px;
        background:#06c no-repeat center center;
        background-size:100%;
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
    /* 通过伪元素设置不同时间段的动画效果 */
    .wave::before{
        animation: wave 3s -1s linear infinite;
    }
    .wave::after{
        animation: wave 3s linear infinite;
    }
    @keyframes wave {
        0%{
        box-shadow: 0 0 0 0 rgba(245, 226, 226, 1);
        }
        50%{
        box-shadow: 0 0 0 20px rgba(245, 226, 226, 0.5);
        }
        100%{
        box-shadow: 0 0 0 40px rgba(245, 226, 226, 0);
        }
    }
</style>
<div class="wave"></div>

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画