svg+gsap实现花瓣旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+gsap实现花瓣旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;300&display=swap" rel="stylesheet">



    <style>
        :root {
          --default: hsl(247, 65%, 53%);
          --white-50: hsla(0, 100%, 100%, 50%);
          --white-25: hsla(0, 100%, 100%, 25%);
          --white: hsl(0, 100%, 100%);
        }
        
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        
        * {
          margin: 0;
          position: relative;
        }
        
        html {
          height: 100%;
        }
        
        img,
        picture,
        video,
        canvas,
        svg {
          display: block;
          max-width: 100%;
        }
        
        input,
        button,
        textarea,
        select {
          font: inherit;
        }
        
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          overflow-wrap: break-word;
        }
        
        #root,
        #__next {
          isolation: isolate;
        }
        
        body {
          color: white;
          font-family: "Raleway", sans-serif;
          font-size: 1rem;
          font-weight: 200;
          letter-spacing: 0.02em;
          background: var(--default);
          overflow-x: hidden;
        }
        
        h1 {
          font-size: 1rem;
          font-weight: 300;
          line-height: 1.5;
        }
        
        p {
          font-size: 0.68rem;
          line-height: 1.15;
          padding-bottom: 1rem;
        }
        
        .petal {
          mix-blend-mode: screen;
        }
        
        .container-btn {
          margin: 1rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          z-index: 10;
          position: absolute;
          background: rgba(255, 255, 255, 0.18);
          border: 1px solid rgba(255, 255, 255, 0.8);
          border-radius: 16px;
          box-shadow: 0 4px 150px rgba(190, 183, 240, 0.3);
          backdrop-filter: blur(1.2px);
          -webkit-backdrop-filter: blur(1.2px);
          padding: 1rem;
          max-width: 220px;
        }
        
        button {
          color: white;
          font-size: 1rem;
          background: rgba(75, 57, 213, 0.8);
          border: 1px solid rgba(255, 255, 255, 0.85);
          border-right: 3px solid rgba(255, 255, 255, 0.85);
          border-bottom: 3px solid rgba(255, 255, 255, 0.85);
          border-radius: 8px;
          cursor: pointer;
          padding: 0.5rem 0;
          width: 100%;
          transition: background 0.3s ease-in-out;
        }
        button:hover {
          background: #3726b5;
        }
        
        .grid-container {
          display: grid;
          grid-template-columns: 1fr;
          grid-gap: 10px;
          width: 100%;
          overflow-x: hidden;
        }
        @media only screen and (min-width: 768px) {
          .grid-container {
            grid-template-columns: repeat(3, 1fr);
          }
        }
        
        @media only screen and (min-width: 768px) {
          .grid-item {
            align-items: center;
          }
        }
    </style>



</head>

<body >
    <section>

        <div class="container-btn">
            <h1>The Randomizer!</h1>
            <p>Change colors and rotation speeds by clicking the Randomize button.</p>
            <button type="button">Randomize</button>
        </div>

        <!-- Start SVG Grid Container -->
        <div class="grid-container">
            <!-- grid 1 -->
            <div class="grid-item">
                <svg class="flower" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" xml:space="preserve">
        <path class="petal" fill="#fff" stroke="white" stroke-width="1" vector-effect="non-scaling-stroke" d="M96.24 150c-29.76 0-53.89-24.13-53.89-53.89s24.13-53.89 53.89-53.89 53.89 24.13 53.89 53.89V150H96.24z"/>
        <path class="petal" fill="#fff" stroke="white" stroke-width="1" vector-effect="non-scaling-stroke" d="M111.99 111.8c-21.04-21.04-55.16-21.04-76.21 0s-21.04 55.16 0 76.21 55.16 21.04 76.21 0l38.1-38.1-38.1-38.11z"/>
        <path class="petal" fill="#fff" stroke="white" stroke-width="1" vector-effect="non-scaling-stroke" d="M96.11 149.87c-29.76 0-53.89 24.13-53.89 53.89s24.13 53.89 53.89 53.89S150 233.52 150 203.76v-53.89H96.11z"/>
        <path class="petal" fill="#fff" stroke="white" stroke-width="1" vector-effect="non-scaling-stroke" d="M111.8 188.01c-21.04 21.04-21.04 55.16 0 76.21s55.16 21.04 76.21 0 21.04-55.16 0-76.21l-38.1-38.1-38.11 38.1z"/>
        <path class="petal" fill="#fff" stroke="white" stroke-width="1" vector-effect="non-scaling-stroke" d="M149.87 203.89c0 29.76 24.13 53.89 53.89 53.89s53.89-24.13 53.89-53.89S233.52 150 203.76 150h-53.89v53.89z"/>
        <path class="petal" fill="#fff" stroke="white" stroke-width="1" vector-effect="non-scaling-stroke" d="M188.01 111.99c21.04-21.04 55.16-21.04 76.21 0s21.04 55.16 0 76.21-55.16 21.04-76.21 0l-38.1-38.1 38.1-38.11z"/>
        <path class="petal" fill="#fff" stroke="white" stroke-width="1" vector-effect="non-scaling-stroke" d="M150 96.24c0-29.76 24.13-53.89 53.89-53.89s53.89 24.13 53.89 53.89-24.13 53.89-53.89 53.89H150V96.24z"/>
        <path class="petal" fill="#fff" stroke="white" stroke-width="1" vector-effect="non-scaling-stroke" d="M111.99 111.99c-21.04-21.04-21.04-55.16 0-76.21s55.16-21.04 76.21 0 21.04 55.16 0 76.21l-38.1 38.1-38.11-38.1z"/>
      </svg>
            </div>
            <!-- gr.........完整代码请登录后点击上方下载按钮下载查看