css雨滴落下水面倒影动画效果代码-html代码-BFW代码库

css雨滴落下水面倒影动画效果代码

代码语言：html

所属分类：动画

代码描述：css雨滴落下水面倒影动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          background: radial-gradient(ellipse at bottom, #381a2d 0%, #0b0b0d 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100vh;
          flex-direction: column;
          position: relative;
          overflow: hidden;
        }
        
        .container {
          transform: rotateX(-70deg) rotateY(1deg);
        }
        
        .outter:nth-child(1) {
          transform: rotate(24.8deg) translate3d(130px, 0, 0);
          animation-delay: 0.3s;
        }
        .outter:nth-child(1):after {
          animation-delay: 0.93s;
        }
        
        .outter:nth-child(2) {
          transform: rotate(49.6deg) translate3d(130px, 0, 0);
          animation-delay: 0.6s;
        }
        .outter:nth-child(2):after {
          animation-delay: 1.23s;
        }
        
        .outter:nth-child(3) {
          transform: rotate(74.4deg) translate3d(130px, 0, 0);
          animation-delay: 0.9s;
        }
        .outter:nth-child(3):after {
          animation-delay: 1.53s;
        }
        
        .outter:nth-child(4) {
          transform: rotate(99.2deg) translate3d(130px, 0, 0);
          animation-delay: 1.2s;
        }
        .outter:nth-child(4):after {
          animation-delay: 1.83s;
        }
        
        .outter:nth-child(5) {
          transform: rotate(124deg) translate3d(130px, 0, 0);
          animation-delay: 1.5s;
        }
        .outter:nth-child(5):after {
          animation-delay: 2.13s;
        }
        
        .outter:nth-child(6) {
          transform: rotate(148.8deg) translate3d(130px, 0, 0);
          animation-delay: 1.8s;
        }
        .outter:nth-child(6):after {
          animation-delay: 2.43s;
        }
        
        .outter:nth-child(7) {
          transform: rotate(173.6deg) translate3d(130px, 0, 0);
          animation-delay: 2.1s;
        }
        .outter:nth-child(7):after {
          animation-delay: 2.73s;
        }
        
        .outter:nth-child(8) {
          transform: rotate(198.4deg) translate3d(130px, 0, 0);
          animation-delay: 2.4s;
        }
        .outter:nth-child(8):after {
          animation-delay: 3.03s;
        }
        
        .outter:nth-child(9) {
          transform: rotate(223.2deg) translate3d(130px, 0, 0);
          animation-delay: 2.7s;
        }
        .outter:nth-child(9):after {
          animation-delay: 3.33s;
        }
        
        .outter:nth-child(10) {
          transform: rotate(248deg) translate3d(130px, 0, 0);
          animation-delay: 3s;
        }
        .outter:nth-child(10):after {
          animation-dela.........完整代码请登录后点击上方下载按钮下载查看