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

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

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