CSS3水滴动画

效果如下

美滋滋，是不是很想get到呢？？？ let‘go！

CSS代码部分

<style>
        body{
            margin: 0;/*外边距*/
            background-color:#3498db;
            /*padding: 0;/*内边距*/
            /*background-image:url("timg.jpeg");/*加一个背景图片*/
           /* background-size:cover;/*等比例覆盖body*/
        }
        div{
            margin:175px auto;
        }
        .drop{
            position: relative;/*相对定位*/
            top:-30px;
            width:20px;/*水滴的宽度*/
            height:20px;/*水滴的高度*/
            background-color:#fff;/*水滴颜色白色*/
            margin:0 auto;/*上下外边距为0 左右自动居中*/
            border-radius: 20px;/*圆角属性 半径为20px*/
            animation: trop cubic-bezier(1,0,.91,.19) 2s infinite;
            /*控制动画速度变化曲线*/
        }
        .drop:before{/*伪元素*/
            content:"";/*插入内容*/
            position:absolute;/*绝对定位*/
            top:-22px;
            width:0;
            height:0;
            border-left:10px solid transparent;
            border-right: 10px solid transparent;/*用边框设置三角属性*/
            border-bottom: 30px solid rgba(255,255,255,1);        
        }
        .wave{
            position:relative;/*相对定位*/
            opacity:0;/*透明*/
            top:0;
            width:2px;
            height:1px;
            border:7px solid #fff;/*边框*/
            border-radius: 300px /150px;/*上下 左右*/
            animation:ripple 2s infinite;/*动画*/
            }
        .wave:after{/*为元素尾部添加样式*/          
            content:"";/*插入内容*/
            opacity:0;
            position:absolute;
            top:-5px;
            left:-5px;
            width:2px;
            height:1px;
            border-radius:5px solid #fff;
            border-radius: 300px / 150px;
            animation:ripple-2 2s 2s infinite;
            /*持续时间2s 延迟时间2s*/
        }
        /*创建动画*/
        @keyframes ripple{
            0%{
                opacity:1;/*不透明*/
            }
            100%{
                width:600px;
                height:300px;
                border-width:1px;
                top:-100px;
                opacity:0;          
            }
      }
      @keyframes ripple-2{
            0%{
                opacity:1;/*不透明*/
            }
            100%{
                width:200px;
                height:100px;
                border-width:1px;
                top:100px;
                left:200px;
                opacity:0;   
            }
      }
      @keyframes trop{
            100%{
                top:190px;
            }
      }
    </style>

HTML代码部分

	<div class="drop"></div>
    <div class="wave"></div>

仅供参考，因为我做出来的结果是这样的(需要努力)：

当然，真实的水滴下落速度还是很慢的（需要鼓励）