svg+css实现月色当空夜景加火苗燃烧动画代码-html代码-BFW代码库

svg+css实现月色当空夜景加火苗燃烧动画代码

代码语言：html

所属分类：动画

代码描述：svg+css实现月色当空夜景加火苗燃烧动画代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
          background: #f5f5f5;
          min-height: 100vh;
          height: 100vh;
          max-height: 100vh;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
        }
        
        #Vector_114 {
          animation: spark_fly_up 3.5s 0.4s infinite linear;
        }
        
        #Vector_123 {
          animation: spark_fly_up 3.1s 0.6s infinite linear;
        }
        
        #Vector_124 {
          animation: spark_fly_up 3s 0.4s infinite linear;
        }
        
        #Vector_122 {
          animation: spark_fly_up 3s 0.5s infinite linear;
        }
        
        #Vector_116 {
          animation: spark_fly_up_2 2.8s 0.8s infinite linear;
        }
        
        #Vector_113 {
          animation: spark_fly_up_2 2.2s 0.6s infinite linear;
        }
        
        #Vector_119 {
          animation: spark_fly_up_2 2.2s 0.7s infinite linear;
        }
        
        #Vector_117 {
          animation: spark_fly_up_2 2s 0.4s infinite linear;
        }
        
        #Vector_115 {
          animation: spark_fly_up_2 3.2s 0.7s infinite linear;
        }
        
        #Vector_118 {
          animation: spark_fly_up_3 2.7s 0.6s infinite linear;
        }
        
        #Vector_120 {
          animation: spark_fly_up_3 3s 0.4s infinite linear;
        }
        
        #Vector_121 {
          animation: spark_fly_up_3 2.8s 0.8s infinite linear;
        }
        
        @keyframes spark_fly_up {
          0% {
            transform: translate(0, 10vw);
            opacity: 1;
          }
          30% {
            transform: translate(10px, 7vw);
          }
          60% {
            transform: translate(0px, 3vw);
            opacity: 0.8;
          }
          100% {
            transform: translate(10px, -2vw);
            opacity: 0;
          }
        }
        @keyframes spark_fly_up_2 {
          0% {
            transform: translate(0, 5vw);
            opacity: 1;
          }
          30% {
            transform: translate(10px, 3vw);
          }
          60% {
            transform: translate(0px, 1vw);
            opacity: 0.8;
          }
          100% {
            transform: translate(10px, -2vw);
            opacity: 0;
          }
        }
        @keyframes spark_fly_up_3 {
          0% {
            transform: translate(0, 0);
            opacity: 0;
          }
          30% {
            transform: translate(0, -2vw);
            opacity: 0.4;
          }
          60% {
            transform: translate(0px, -3vw);
            opacity: 0.9;
          }
          100% {
            transform: translate(0px, -4vw);
            opacity: 0;
          }
        }
        #Vector_91 {
          animation: fire_halo 3s infinite alternate ease-in-out;
          transform-origin: center bottom;
          transform-box: fill-box;
        }
        
        @keyframes fire_halo {
          0% {
            transform: scale(1.02);
          }
          20% {
            transform: scale(0.95);
          }
          40% {
            transform: scale(0.92);
          }
          60% {
            transform: scale(0.94);
          }
          80% {
            transform: scale(1.03);
          }
          100% {
            transform: scale(1);
          }
        }
        #Vector_126 {
          animation: flicker 1s 0.4s infinite alternate linear;
          transform-origin: bottom;
          transform-box: fill-box;
        }
        
        #Vector_125 {
          animation: flicker 2s 0.5s infinite alternate linear;
          transform-origin: bottom;
          transform-box: fill-box;
        }
        
        @keyframes flicker {
          0% {
            transform: rotate(-1deg);
          }
          20% {
            transform: rotate(1deg);
          }
          40% {
            transform: rotate(-1deg);
          }
          60% {
            transform: rotate(1deg) scaleY(1.02);
          }
          80% {
            transform: rotate(-1deg) scaleY(0.95);
          }
          100% {
            transform: rotate(1deg);
          }
        }
        #Vector_16,
        #Vector_19,
        #Vector_60 {
          animation: translate 100s infinite -40s linear;
        }
        
        #Vector_15,
        #Vector_17,
        #Vector_18,
        #Vector_61,
        #Vector_62 {
          animation: translate 130s infinite -20s linear;
        }
        
        @keyframes translate {
          from {
            transform: translateX(-80%);
          }
          to {
            transform: translateX(100%);
          }
        }
        #meteor1 {
          animation: meteorTraslate 2.2s linear 5s;
        }
        
        #meteor2 {
          animation: meteorTraslate 1.8s linear 11s;
        }
        
        @keyframes meteorTraslate {
          from {
            transform: translate(0%, 0);
          }
          to {
            transform: translate(-70%, 20%);
            opacity: 0;
          }
        }
    </style>



</head>

    <body>
        <svg width="650" height="650" viewBox="0 0 650 650" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g id="Mask group">
        <mask
          id="mask0_11_2760"
          style="mask-type: alpha"
          maskUnits="userSpaceOnUse"
          x="0"
          y="0"
          width="650"
          height="650"
        >
          <rect id="mask" width="650" height="650" rx="325" fill="#3A4A6D" />
        </mask>
        <g mask="url(#mask0_11_2760)&.........完整代码请登录后点击上方下载按钮下载查看