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