CSS3应用---水波纹特效

html部分：

 <div class="wave">
        水波纹效果
        <div class="wavel"></div>
    </div>

---

css部分

 /* 
        思路：先画一个圆;  再画椭圆；让椭圆转圈
        */
        .wave {
            position: relative;
            border: 1px solid silver;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            line-height: 50px;
            margin: 0 auto;
            font-size: 14px;
            text-align: center;
            overflow: hidden;
            animation: water-wave linear infinite;
        }

        .wavel {
            position: absolute;
            top: 40%;
            left: -25%;
            background: #33cfff;
            opacity: .7;
            width: 200%;
            height: 200%;
            border-radius: 40%;
            animation: inherit;
            animation-duration: 5s;