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

css下雨溅起涟漪动画效果代码

代码语言：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: in.........完整代码请登录后点击上方下载按钮下载查看