css实现山间日出火箭动画效果代码-html代码-BFW代码库

css实现山间日出火箭动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现山间日出火箭动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --trees-z1: hsl(20, 60%, 20%);
          --trees-z2: hsl(20, 60%, 30%);
          --trees-z3: hsl(20, 60%, 50%);
          --trees-z4: hsl(20, 60%, 60%);
          --rocket-1: #f00;
          --rocket-2: #b00;
          --hills: hsl(20, 60%, 40%);
          --mountains: #f90;
          --snow: #fa0;
          --sky: #f60;
          --sun: #f90;
          --angle: -20deg;
        }
        
        svg {
          width: 100vh;
          height: 100vh;
          margin: 0 auto;
        }
        svg *{
          transition: all 2s;
        }
        svg:hover{
           --trees-z1: #0b3253;
          --trees-z2: #0c3b5b;
          --trees-z3: #1e566b;
          --trees-z4: #bcc7b0;
          --rocket-1: #bfe2cd;
          --rocket-2: #c5efd4;
          --hills: #486a72;
          --mountains: #bdd8ba;
          --snow: #d2e8cf;
          --sky: #a0cdb3;
          --sun: #fff;
          --angle: 20deg;
        }
        
        #sky {
          transform-origin: 250px 450px;
          transform: rotate(var(--angle));
        }
        
        .shadow {
          opacity: 0.24;
        }
        
        body {
          background: #0b3253;
          width: 100vw;
          height: 100vh;
          display: flex;
          padding: 0;
          margin: 0;
        }
    </style>



</head>

<body>
    <svg id="main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 505">
  <defs>
    <clipPath id="clip-path">
      <circle id="circle" cx="250" cy="250" r="200"/>
    </clipPath>
    <radialGradient id="sunGlare" cx="146.18" cy="185.52" r="90"  gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="var(--sun)"/>
      <stop offset="1" stop-color="var(--sky)" />
    </radialGradient>
  </defs>
  <g id="world" clip-path="url(#clip-path)">
    <g id="sky">
      <circle id="sky_disk" fill="var(--sky)" cx="250" cy="450" r="524.95"/>
      <circle id="glare" fill="url(#sunGlare)" cx="146.18" cy="185.52" r="90"/>
      <circle id="sun_core" fill="var(--sun)" cx="146.18" cy="185.52" r="25"/>  
    </g>
    <path id="mountains" fill="var(--mountains)" d="M500 500H0V366c27.18-20.91 87.73-70 104.37-88.25l4.89 10.49 12.39-12.39 10.14 12.39 23.34-24.79L183 293.3l61.38-50.36 4.52 19.39 21.4 6.76 26.34-14.36c13.93 17.18 30 35.2 38.43 38.58 16.9 6.76 54.07 13.52 54.07 13.52L500 393z"/>
    <path id="snow2" fill="var(--snow)" d="M296.67 254.72l-26.34 14.36-21.4-6.76-4.52-19.39 26.48-21.73s11.84 16.35 25.78 33.52z"/>
    <path id="snow1" fill="var(--snow)" d="M155.13 263.44l-23.34 24.79-10.14-12.39.........完整代码请登录后点击上方下载按钮下载查看