svg+js实现月圆之夜树下篝火燃烧动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+js实现月圆之夜树下篝火燃烧动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @-webkit-keyframes float {
      0% {
        transform: translateX(0) translateY(10px);
      }
      25% {
        transform: translateX(20px) translateY(0);
      }
      50% {
        transform: translateX(0) translateY(-10px);
      }
      75% {
        transform: translateX(-20px) translateY(0);
      }
      100% {
        transform: translateX(0) translateY(10px);
      }
    }
    @keyframes float {
      0% {
        transform: translateX(0) translateY(10px);
      }
      25% {
        transform: translateX(20px) translateY(0);
      }
      50% {
        transform: translateX(0) translateY(-10px);
      }
      75% {
        transform: translateX(-20px) translateY(0);
      }
      100% {
        transform: translateX(0) translateY(10px);
      }
    }
    @-webkit-keyframes fireFront {
      0% {
        transform: translateX(0) translateY(0);
        opacity: 0.6;
      }
      10% {
        transform: translateX(2.5px) translateY(-5px);
      }
      20% {
        transform: translateX(0) translateY(-15px);
      }
      30% {
        transform: translateX(-2.5px) translateY(-20px);
      }
      40% {
        transform: translateX(0) translateY(-25px);
      }
      50% {
        transform: translateX(2.5px) translateY(-30px);
        opacity: 0.2;
      }
      60% {
        transform: translateX(0) translateY(-35px);
      }
      70% {
        transform: translateX(-2.5px) translateY(-40px);
      }
      80% {
        transform: translateX(0) translateY(-45px);
      }
      90% {
        transform: translateX(2.5px) translateY(-50px);
      }
      100% {
        transform: translateX(0) translateY(-55px);
        opacity: 0;
      }
    }
    @keyframes fireFront {
      0% {
        transform: translateX(0) translateY(0);
        opacity: 0.6;
      }
      10% {
        transform: translateX(2.5px) translateY(-5px);
      }
      20% {
        transform: translateX(0) translateY(-15px);
      }
      30% {
        transform: translateX(-2.5px) translateY(-20px);
      }
      40% {
        transform: translateX(0) translateY(-25px);
      }
      50% {
        transform: translateX(2.5px) translateY(-30px);
        opacity: 0.2;
      }
      60% {
        transform: translateX(0) translateY(-35px);
      }
      70% {
        transform: translateX(-2.5px) translateY(-40px);
      }
      80% {
        transform: translateX(0) translateY(-45px);
      }
      90% {
        transform: translateX(2.5px) translateY(-50px);
      }
      100% {
        transform: translateX(0) translateY(-55px);
        opacity: 0;
      }
    }
    @-webkit-keyframes fireMid {
      0% {
        transform: translateX(0) translateY(0);
        opacity: 0.6;
      }
      10% {
        transform: translateX(2.5px) translateY(-10px);
      }
      20% {
        transform: translateX(0) translateY(-20px);
      }
      30% {
        transform: translateX(-2.5px) translateY(-30px);
      }
      40% {
        transform: translateX(0) translateY(-40px);
      }
      50% {
        transform: translateX(2.5px) translateY(-50px);
        opacity: 0.1;
      }
      60% {
        transform: translateX(0) translateY(-60px);
      }
      70% {
        transform: translateX(-2.5px) translateY(-70px);
      }
      80% {
        transform: translateX(0) translateY(-80px);
      }
      90% {
        transform: translateX(2.5px) translateY(-90px);
      }
      100% {
        transform: translateX(0) translateY(-100px);
        opacity: 0;
      }
    }
    @keyframes fireMid {
      0% {
        transform: translateX(0) translateY(0);
        opacity: 0.6;
      }
      10% {
        transform: translateX(2.5px) translateY(-10px);
      }
      20% {
        transform: translateX(0) translateY(-20px);
      }
      30% {
        transform: translateX(-2.5px) translateY(-30px);
      }
      40% {
        transform: translateX(0) translateY(-40px);
      }
      50% {
        transform: translateX(2.5px) translateY(-50px);
        opacity: 0.1;
      }
      60% {
        transform: translateX(0) translateY(-60px);
      }
      70% {
        transform: translateX(-2.5px) translateY(-70px);
      }
      80% {
        transform: translateX(0) translateY(-80px);
      }
      90% {
        transform: translateX(2.5px) translateY(-90px);
      }
      100% {
        transform: translateX(0) translateY(-100px);
        opacity: 0;
      }
    }
    @-webkit-keyframes fireBack {
      0% {
        transform: translateX(0) translateY(0);
        opacity: 0.8;
      }
      10% {
        transform: translateX(2.5px) translateY(-20px);
      }
      20% {
        transform: translateX(0) translateY(-40px);
      }
      30% {
        transform: translateX(-2.5px) translateY(-60px);
      }
      40% {
        transform: translateX(0) translateY(-80px);
      }
      50% {
        transform: translateX(2.5px) translateY(-100px);
        opacity: 0.1;
      }
      60% {
        transform: translateX(0) translateY(-120px);
      }
      70% {
        transform: translateX(-2.5px) translateY(-140px);
      }
      80% {
        transform: translateX(0) translateY(-160px);
      }
      90% {
        transform: translateX(2.5px) translateY(-180px);
      }
      100% {
        transform: translateX(0) translateY(-200px);
        opacity: 0;
      }
    }
    @keyframes fireBack {
      0% {
        transform: translateX(0) translateY(0);
        opacity: 0.8;
      }
      10% {
        transform: translateX(2.5px) translateY(-20px);
      }
      20% {
        transform: translateX(0) translateY(-40px);
      }
      30% {
        transform: translateX(-2.5px) translateY(-60px);
      }
      40% {
        transform: translateX(0) translateY(-80px);
      }
      50% {
        transform: translateX(2.5px) translateY(-100px);
        opacity: 0.1;
      }
      60% {
        transform: translateX(0) translateY(-120px);
      }
      70% {
        transform: translateX(-2.5px) translateY(-140px);
      }
      80% {
        transform: translateX(0) translateY(-160px);
      }
      90% {
        transform: translateX(2.5px) translateY(-180px);
      }
      100% {
        transform: translateX(0) translateY(-200px);
        opacity: 0;
      }
    }
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      position: relative;
    }
    
    body {
      background: #1a252f;
    }
    
    .container {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    .container .fire {
      width: 320px;
      min-width: 300px;
      height: 320px;
      min-height: 300px;
      position: relative;
      -webkit-animation: float 30s ease-in-out infinite;
              animation: float 30s ease-in-out infinite;
    }
    .container .fire.debug {
      border: 1px solid red;
    }
    .container .fire.debug .fire-front span,
    .container .fire.debug .fire-mid span,
    .container .fire.debug .fire-back span {
      background: none;
      border-radius: 0px;
      border: 1px solid blue;
    }
    .container .fire.debug .fireplace {
      border: 1px solid yellow;
    }
    .container .fire.debug .fireplace img {
      display: none;
    }
    .container .fire .fire-front {
      position: absolute;
      width: 60px;
      height: 120px;
      bottom: 20px;
      left: 50%;
      margin-left: -30px;
      z-index: 4;
    }
 .........完整代码请登录后点击上方下载按钮下载查看