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

代码语言：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)">
          <g id="background">
            <rect id="background_2" width="650" height="650" fill="#3A4A6D" />
          </g>
          <g id="Shadow">
            <path
              id="Vector"
              d="M251.964 587.023C317.784 587.023 371.141 582.005 371.141 575.813C371.141 569.622 317.784 564.603 251.964 564.603C186.145 564.603 132.787 569.622 132.787 575.813C132.787 582.005 186.145 587.023 251.964 587.023Z"
              fill="#415173"
            />
            <path
              id="Vector_2"
              d="M415.489 574.231C471.158 574.231 516.286 569.574 516.286 563.83C516.286 558.086 471.158 553.429 415.489 553.429C359.821 553.429 314.693 558.086 314.693 563.83C314.693 569.574 359.821 574.231 415.489 574.231Z"
              fill="#45567A"
            />
          </g>
          <g id="Meteor">
            <path
              id="meteor1"
              d="M643 131.277L731.846 111.338"
              stroke="url(#paint0_linear_11_2760)"
              stroke-width="0.6"
              stroke-linecap="round"
            />
            <path
              id="meteor2"
              d="M546.21 56.5839L635.056 36.644"
              stroke="url(#paint1_linear_11_2760)"
              stroke-width="0.6"
              stroke-linecap="round"
            />
          </g>
          <g id="background-complete">
            <path
              id="Vector_3"
              d="M2.28723 296.737C2.28723 296.737 106.665 236.737 171.389 236.737C249.123 236.737 324.703 263.477 353.294 272.303C428.557 295.494 574.288 296.737 574.288 296.737H2.28723Z"
              fill="#21293D"
            />
            <path
              id="Vector_4"
              d="M650 297.143C650 297.143 580.79 256.286 502.612 256.286C448.031 256.286 369.708 264.742 295.95 278.614C267.853 283.885 121.643 297.143 121.643 297.143H650Z"
              fill="#252E45"
            />
            <path
              id="Vector_5"
              d="M329.231 240.963L330.433 243.394L333.126 243.781L331.179 245.673L331.635 248.353L329.231 247.082L326.842 248.353L327.298 245.673L325.35 243.781L328.03 243.394L329.231 240.963Z"
              fill="white"
            />
            <path
              id="Vector_6"
              d="M498.266 80.1215L499.468 82.5524L502.147 82.9391L500.2 84.8314L500.67 87.5109L498.266 86.2402L495.863 87.5109L496.319 84.8314L494.385 82.9391L497.065 82.5524L498.266 80.1215Z"
              fill="white"
            />
            <path
              id="Vector_7"
              d="M259.579 148.823L260.781 151.254L263.474 151.654L261.527 153.547L261.983 156.212L259.579 154.955L257.19 156.212L257.646 153.547L255.698 151.654L258.392 151.254L259.579 148.823Z"
              fill="white"
            />
            <path
              id="Vector_8"
              d="M88.3646 129.762L89.5663 132.193L92.2458 132.594L90.2983 134.486L90.7679 137.152L88.3646 135.895L85.9613 137.152L86.4171 134.486L84.4834 132.594L87.163 132.193L88.3646 129.762Z"
              fill="white"
            />
            <path
              id="Vector_9"
              d="M0.547596 52.0001L1.29345 53.5056L2.9509 53.7404L1.74925 54.9144L2.0393 56.5719L0.547596 55.7846L-0.930299 56.5719L-0.654061 54.9144L-1.85571 53.7404L-0.184449 53.5056L0.547596 52.0001Z"
              fill="white"
            />
            <path
              id="Vector_10"
              d="M101.39 142.801L102.136 144.293L103.793 144.541L102.592 145.715L102.882 147.359L101.39 146.585L99.9122 147.359L100.188 145.715L98.9868 144.541L100.658 1.........完整代码请登录后点击上方下载按钮下载查看