css水滴滴水动画效果代码-html代码-BFW代码库

css水滴滴水动画效果代码

代码语言：html

所属分类：动画

代码描述：css水滴滴水动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en" class="no-js">

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>

    .drop {
        background: rgba(255,255,245,1);
        border: 4px solid rgba(255,245,235,1);
        border-radius: 100%;
        box-shadow: inset -0.1em 0 2em 0.5em rgba(255,255,255,0.5),
                                inset -0.1em 0 0.5em 0 rgba(0,0,0,0.8);
        position: relative;
        margin: 0 auto;
        width: 15em; height: 15em;
        overflow: hidden;
    }
    
    .drop:before,
    .drop:after {
        content: "";
        display: block;
        position: absolute;
    }
    
    .drop:before {
        background: rgba(167, 217, 234,1);
        border-radius: 100%;
        box-shadow: 0 0 0 0.1em rgba(167, 217, 234,0.8),
                                0 0 0 0.15em rgba(167, 217, 234,0.8),
                                0 0 0 0.2em rgba(167, 227, 234,0.8),
                                0 0 0 0.25em rgba(167, 227, 234,0.8),
                                0 0 0 0.3em rgba(167, 227, 234,0.8),
                                0 0 0 0.35em rgba(167, 227, 234,0.8),
                                0 0 0 0.4em rgba(167, 227, 234,0.8),
                                0 0 0 0.45em rgba(167, 227, 234,0.8),
                                0 0 0 0.5em rgba(167, 227, 234,0.8);
        top: 0%; left: 50%;
        width: 0.1em; height: 0.1em;
        -webkit-animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
           -moz-animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
                -ms-animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
                        animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
    }
    
    .drop:after {
        background: rgb(52,152,219);
        background: -webkit-linear-gradient(rgba(52,255,255,1) 0%, rgba(52,152,219,1) 10%, rgba(152,252,219,1) 100%);
        background: -moz-linear-gradient(rgba(52,255,255,1) 0%, rgba(52,152,219,1) 10%, rgba(152,252,219,1) 100%);
        background: linear-gradient(rgba(52,255,255,1) 0%, rgba(52,152,219,1) 10%, rgba(152,252,219,1) 100%);
        border-radius: 100% 0 50% 0;
        left: 0; bottom: 0;
        width: inherit; height: 3em;
        opacity: 0.7;
        -webkit-animation: surface 3s linear infinite;
           -moz-animation: surface 3s linear infinite;
                -ms-animation: surface 3s linear infinite;
                        animation: surface 3s linear infinite;
    }
    
    @-webkit-keyframes fall {
        5%, 15% {
                box-shadow: 0 -1.4em 0 0.1em rgba(167,217,234,1),
                                        0 -0.8em 0 0.15em rgba(167,217,234,1),
                                        0 -0.3em 0 0.2em rgba(167,217,234,1),
                                        0 -0.1em 0 0.25em rgba(167,217,234,1),
                                        0 0 0 0.3em rgba(167,217,234,1),
                                        0 0.2em 0 0.35em rgba(167,217,234,1),
                                        0 0.4em 0 0.4em rgba(167,217,234,1),
                                        0 0.6em 0 0.45em rgba(167,217,234,1),
                                        0 0.8em 0 0.5em rgba(167,217,234,1);
        }
        16% {
                top: 80%;
        }
        18% {
                top: 80%;
                box-shadow: 1em -8em 0 0.2em rgba(177, 227, 234,1),
                                        -2.2em -3.8em 0 0.1em rgba(177, 227, 234,1),
                                        3em -2.85em 0 0.3em rgba(177, 227, 234,1),
                                        -3.5em -4em 0 0.2em rgba(177, 227, 234,1),
                                        0 0 0 0.3em rgba(177, 227, 234,1),
                                        2em -2em 0 0.2em rgba(177, 227, 234,1),
                                        -0.3em -3em 0 0.2em rgba(177, 227, 234,1),
                                        0.5em -5em 0 0.35em rgba(177, 227, 234,1),
                                        -3em -1em 0 0.3em rgba(177, 227, 234,1);
        }
        30% {
                top: 90%;
                box-shadow: 1.5em 0 0 0.2em rgba(252,252,255,0.1),
                                        -2em 0 0 0.15em rgba(252,252,255,0.1),
                                        3em 0 0 0.2em rgba(252,252,255,0.1),
                                        -2em 0 0 0.25em rgba(252,252,255,0.1),
                                        0 0 0 0.2em rgba(252,252,255,0.1),
                                        2.35em 0 0 0.3em rgba(252,252,255,0.1),
                                        -0.5em 0 0 0.2em rgba(252,252,255,0.1),
                                        1em 0 0 0.3em rgba(252,252,255,0.1),
                                        -4em 0 0 0.4em rgba(252.........完整代码请登录后点击上方下载按钮下载查看