css下雨溅起涟漪动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css下雨溅起涟漪动画效果代码，css+div实现，无js代码。

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <style>
        body{
            
        }
    .rain{
        position: relative;
       width: 160px;
        height: 100%;
    }
    
    .rain:nth-of-type(1){
        --duration: 2.7s;
        --delay: 1s;
        transform: translate(10%, 10%) scale(0.9);
    }
    
    .rain:nth-of-type(2){
        --duration: 2.1s;
        --delay: 1.2s;
        transform: translate(-20%, 40%) scale(1.3);
    }
    
    .rain:nth-of-type(3){
        --duration: 2.3s;
        --delay: 2s;
        transform: translate(0%, 50%) scale(1.1);
    }
    
    .rain:nth-of-type(4){
        --duration: 2s;
        --delay: 4s;
        transform: translate(0%, -10%) scale(1.2);
    }
    
    .rain:nth-of-type(5){
        --duration: 2.5s;
        --delay: 0s;
        transform: translate(10%, 0%) scale(0.9);
    }
    
    .rain:nth-of-type(6){
        --duration: 2s;
        --delay: 2.7s;
        transform: translate(-20%, 0%) scale(1);
    }
    
    .rain:nth-of-type(7){
        --duration: 1.8s;
        --delay: 1.3s;
        transform: translate(20%, -40%) scale(1.2);
    }
    
    .rain:nth-of-type(8){
        --duration: 2.2s;
        --delay: 0s;
        transform: translate(20%, 0%) scale(1);
    }
    
    .rain:nth-of-type(9){
        --duration: 2s;
        --delay: 0.5s;
        transform: translate(0%, -10%) scale(1.3);
    }
    
    .drop{
        background-color: white;
        width: 3px;
        height: 100px;
   
        position: absolute;
        top: calc(50% - 100px);
        left: calc(50% - 1.5px);
        animation-name: fall;
        animation-duration: var(--duration);
        animation-delay: var(--delay);
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-fill-mode: backwards;
    }
    
    @keyframes fall{
        0%{
            transform: translateY(-120vh);
        }
        45%{
            transform: translateY(0%);
            opacity: 1;
        }
        46%{
            opacity: 0;
        }
        100%{
            opacity: 0;
        }
    }
    
    .waves > div{
        position: absolute;
        top:0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
  
        border-radius: 50%;
        border: solid white 3px;
        animation-name: spread;
        animation-duration: var(--duration);
        animation-delay: var(--delay);
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
        animation-fill-mode: backwards;
    }
    
    .waves > div:nth-child(2){
        animation-delay: calc(var(--delay) + 0.3s);
        animation-timing-function: linear;
    }
    
    @keyframes spread{
        0%{
            transform: scale(0);
            opacity: 1;
        }
        40%{
            transform: scale(0);
            opacity: 1;
        }
    
        100%{
            transform: scale(1);
            opacity: 0;
        }
    }
    
    
    .splash{
        position: absolute;
        top: 10%;
        bottom: 50%;
        left: 35%;
        right: 35%;
        border-radius: 8px;
        clip-path: polygon(7% 100%, 5% 95%, 3% 80%, 11% 50%, 17% 38%, 23% 44%, 30% 53%, 37% 28%, 40% 29%, 45% 43%, 51% 53%, 59% 36%, 64% 22%, 67% 23%, 70% 34%, 72% 46%, 79% 37%, 83% 37%, 93% 61%, 96% 76%, 96% 94%, 94% 100%);
        background-color: white;
        transform-origin: bottom;
        animation-name: splash;
        animation-duration: var(--duration);
        animation-delay: var(--delay);
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
        animation-fill-mode: backwards;
    }
    
    @keyframes splash{
        0%{
            transform: scale(0.3, 0);
        }
    
        49%{
            transform: scale(0.3, 0);
        }
    
        50%{
            transform: scale(0.3, 0.3);
        }
    
        60%{
            transform: scale(0.7, 1);
        }
    
        90%{
            transform: scale(1, 0);
        }
    
        100%{
            transform: scale(1, 0);
        }
    }
    
    .particles > div{
        position: absolute;
        border-radius: 100%;
        background-color: white;
        animation-duration: var(--duration);
        animation-delay: var(--delay);
        animation-iteration-count: infinite;
        animation-timing-function: ease;
        animation-fill-mode: backwards;
    }
    
    .particles > div:nth-child(1){
        width: 7px;
        height: 7px;
        top: 50%;
        left: 50%;
        animation-name: jumpLeft;
    }
    
    .particles > div:nth-child(2){
        width: 5px;
        height: 5px;
        top: 30%;
        left: 50%;
        animation-name: jumpLeft;
        animation-delay: calc(var(--delay) + 0.1s);
    }
    
    .particles > div:nth-child(3){
        width: 3px;
        height: 3px;
        top: 20%;
        left: 70%;
        animation-name: jumpRight;
        animation-delay: calc(var(--delay) + 0.15s);
    }
    
    .particles > div:nth-child(4){
        width: 5px;
        height: 5px;
        top: 30%;
        left: 50%;
        animation-name: jumpRight;
        animation-delay: calc(var(--delay) + 0.3s);
    }
    
    @keyframes jumpLeft{
        0%{
            transform: translate(0,0) scale(0);
        }
    
        45%{
            transform: translate(0,0) scale(0);
        }
    
        60%{
            transform: translate(-50px, -90px) scale(1);
        }
    
        100%{
            transform: translate(-60px, 0px) scale(0.1);
        }
    }
   .........完整代码请登录后点击上方下载按钮下载查看