gsap+css实现漂亮的莲花花朵绽放动画效果代码-html代码-BFW代码库

gsap+css实现漂亮的莲花花朵绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+css实现漂亮的莲花花朵绽放动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --purpleOver:rgba(230, 70, 215, 0.8); 
          --purple0: rgba(180, 95, 180, 0.5);
          --purple1: rgb(250, 215, 255);
        }
        
        html {
          width: 100%;
          height: 100%;
        }
        
        body {
          background-color: #000;
          height: 100%;
          width: 100%;
        }
        
        main {
          height: 100vh;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 0;
          margin: 0;
          padding: 0;
        }
        
        .corolla {
          margin-bottom: 80px;
          min-height: 100px;
          width: max-content;
          display: flex;
          justify-content: center;
          transform: rotate(-45deg);
        }
        
        .segmR{
          width: 100px;
          height: 100px;
          border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
          background: linear-gradient(135deg,var(--purple0) 0%,
          var(--purple1) 50%,var(--purple0) 100%);
          position: absolute;
        }
        
        .segmR::before {
          content: "";
          position: absolute;
          width: 100px;
          height: 100px;
          border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
          background-image: radial-gradient(circle at center,
          rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, 
          var(--purpleOver) 100%);
          box-shadow: 0px 0px 20px rgba(138, 50, 120, 0.2) inset;
        }
        
        .segmL {
          width: 100px;
          height: 100px;
          border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
          background: linear-gradient(135deg,var(--purple0) 0%,
          var(--purple1) 50%,var(--purple0) 100%);
          position: absolute;
        }
        
        .segmL::before {
          content: "";
          position: absolute;
          width: 100px;
          height: 100px;
          border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
          background-image: radial-gradient(circle at center,
          rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, 
          var(--purpleOver) 100%);
          box-shadow: 0px 0px 20px rgba(138, 50, 120, 0.2) inset;
        }
        
        .rings {
          min-height: 100px;
          width: max-content;
          display: flex;
          justify-content: center;
        }
        
        .ring{
          position: absolute;
          background: linear-gradient(hsla(185, 90%, 59%, 0) 0%, rgba(65, 195, 255, 0.5) 100%);
          border-radius: 80% 90% 80% 90%;
          box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.8) inset,
          0px 3px 0px rgba(229, 246, 247, 0.8);
        }
        
        /* Disclaimer: colors may change every now and then... I easily get tired! ¯\_(ツ)_/¯  */
    </style>



</h.........完整代码请登录后点击上方下载按钮下载查看