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