gsap+svg实现可爱的太阳升起发光动画效果代码-html代码-BFW代码库

gsap+svg实现可爱的太阳升起发光动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现可爱的太阳升起发光动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          display: grid;
          gap: 1em;
          place-items: center;
          background: black;
        }
        
        svg {
          width: 600px;
          opacity: 0;
          max-width: 80vw;
          max-height: 80vh;
        }
        
        #flare-outline {
          fill: none;
        }
        
        #rays {
          fill: goldenrod;
        }
    </style>


</head>

<body >
    <!-- SVG originally from https://www.svgrepo.com/svg/243799/sun -->
    <!-- with edits, to group, reorder and add IDs/classes -->
    <svg id="wake-up-svg" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
  <circle cx="400" cy="400" r="379.505" fill="url(#radial-glow)" id="glow" />
  <g id="flares" fill="#f78a68">
    <path id="flare-1" d="m497.607 170.745.308 105.839c-22.963-18.257-51.156-30.219-81.966-33.322l74.068-75.594c2.77-2.834 7.578-.872 7.59 3.077Z" />
    <path id="flare-2" d="M627.922 299.367c3.962-.038 5.987 4.744 3.192 7.552l-74.606 75.017c-3.5-30.694-15.834-58.721-34.399-81.453l.013-.013 105.8-1.103Z" />
    <path id="flare-3" d="M632.332 490.017c2.821 2.769.872 7.577-3.09 7.59l-105.839.308c18.27-22.963 30.232-51.156 33.335-81.966l75.594 74.068Z" /&g.........完整代码请登录后点击上方下载按钮下载查看