css实现水面绽放莲花动画效果代码-html代码-BFW代码库

css实现水面绽放莲花动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现水面绽放莲花动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          background: linear-gradient(#26c6da 25%, #b3e5fc 50%, #00bcd4 50%, #006064);
          height: 100vh;
          width: 100vw;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
        }
        
        .ripple {
          position: absolute;
          align-self: center;
          justify-self: center;
          border-bottom: 5px solid white;
          border-radius: 50%;
          animation: rp 10s 4s ease-out infinite;
        }
        
        .r2 {
          animation-delay: 9s;
        }
        
        .lotus {
          position: relative;
          align-self: center;
          justify-self: center;
          width: 300px;
          height: 300px;
          -webkit-box-reflect: below -250px linear-gradient(rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.25));
          animation: wobble 5s 5s linear infinite;
        }
        
        .petal {
          background: #6a1b9a;
          width: 100px;
          height: 100px;
          opacity: 80%;
          position: absolute;
          border-radius: 0% 90% 0% 90%/0% 90% 0% 90%;
          left: 50%;
          margin-left: -100px;
          top: 50%;
          margin-top: -100px;
        }
        
        .p1 {
          transform-origin: bottom right;
          animation: pt1 5s;
          animation-fill-mode: forwards;
        }
        
        .p2 {
          transform-origin: bottom right;
          animation: pt2 5s;
          animation-fill-mode: forwards;
        }
        
        .p3 {
          transform-origin: bottom right;
          animation: pt3 5s;
          animation-fill-mode: forwards;
        }
        
        .p4 {
          transform-origin: bottom right;
          animation: pt4 5s;
          animation-fill-mode: forwards;
        }
        
        .p5 {
          transform-origin: bottom right;
          animation: pt5 5s;
          animation-fill-mode: forwards;
        }
        
        .p6 {
          transform-origin: bottom right;
          animation: pt6 5s;
          animation-fill-mode: forwards;
        }
        
        .p7 {
          transform-origin: bottom right;
          animation: pt7 5s;
          animation-fill-mode: forwards;
        }
        
        .leaf {
          width: 100px;
          height: 100px;
          background: #00695c;
          position: absolute;
          border-radius: 0% 90% 0% 90%/0% 90% 0% 90%;
          left: 50%;
          margin-left: -100px;
          top: 50%;
          margin-top: -100px;
        }
        
        .l1 {
          transform-origin: bottom right;
          animation: lf1 5s;
          animation-fill-mode: forwards;
        }
        
        .l2 {
          transform-origin: bottom right;
          animation: lf2 5s;
          animation-fill-mode: forwards;
        }
        
        .center {
          background: #00695c;
          width: 50px;
          height: 50px;
          position: absolute;
          border-radius: 50%;
          left: 50%;
          margin-left: -25px;
          top: 50%;
          margin-top: -25px;
          animation: c 8s;
          animation-fill-mode: forwards;
        }
        
        .magic {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #f06292;
          box-shadow: 0 0 5px 3px #f06292;
          position: absolute;
          top: 20%;
          left: 50%;
          margin-left: -2px;
        }
        
        .m1 {
          opacity: 0;
          animation: fadein 5s 2s ease infinite, floatup 5s 2s ease infinite, left 5s 2s ease infinite;
        }
        
        .m2 {
          opacity: 0;
          animation: fadein 5s 2.5s ease infinite, floatup 5s 2.5s ease infinite, right 5s 2.5s ease infinite;
        }
        
        .m3 {
          opacity: 0;
          animation: fadein 5s 3s ease infinite, floatup 5s 3s ease infinite, farleft 5s 3s ease infinite;
        }
        
        .m4 {
          opacity: 0;
          animation: fadein 5s 3.5s ease infinite, floatup 5s 3.5s ease infinite, farright 5s 3.5s ease infinite;
        }
        
        .m5 {
          opacity: 0;
          animation: fadein 5s 4s linear infinite, floatup 5s 4s linear infinite;
        }
        
        .m6 {
          opacity: 0;
          animation: fadein 5s 4.5s ease infinite, floatup 5s 4.5s ease infinite, left 5s 4.5s ease infinite;
        }
        
        .m7 {
          opacity: 0;
          animation: fadein 5s 5s e.........完整代码请登录后点击上方下载按钮下载查看