js实现canvas圣诞节大雪纷飞动画效果代码

代码语言:html

所属分类:粒子

代码描述:js实现canvas圣诞节大雪纷飞动画效果代码

代码标签: 圣诞节 大雪纷飞 动画 效果

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: url(//repo.bfw.wiki/bfwrepo/image/5fdd387b774b6.png) !important;
  height: 100vh !important;
  width: 100vw !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  font-family: "Brush Script MT", cursive;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgb(2, 0, 36);
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 9, 121, 1) 35%,
    rgba(0, 212, 255, 1) 100%
  );
  color: white;
  text-align: center;
  /*   height: 7%; */
  padding-top: 2%;
  padding-bottom: 1.7%;
  font-size: 16px;
}

.footer a {
  color: white;
}

.blink {
  animation: blink 0.5s infinite;
  animation-delay: 500ms;
}
@keyframes blink {
  to {
    opacity: 0;
  }
}
.typing {
  display: flex;
  margin-top: 10%;
}

.header-sub-title,
h2 {
  font-weight: 600;
  font-size: 40px;
  color: #ff6b6b;
  padding-right: 0.1em;
  text-transform: uppercase;
}
</style>


</head>

<body translate="no" >
  <embed src="https://www.gmajormusictheory.org/Freebies/Intermediate/Level1mp3/HeShallFeed.mp3" width="180" height="90" loop="true" autostart="false" hidden="true" />

  
      <script  >
let simpleParallax;

function Snowfall(params) {
  const snowfall = this;
  let CANVAS_WIDTH = 600;
  let CANVAS_HEIGHT = 400;
  const TOTAL_SNOWFLAKES = 6000;
  const FALL_TIME = 13;
  const TOTAL_SNOWFLAKE_LAYERS = 8;
  const BLOW_DISTANCE = 400;
  let snowfallLayersByIndex = [];
  let snowfallLayersByCanvasId = [];
  let bSimpleParallaxLibLoaded = false;
  let coreSnowflakeStylesNd;
  let skyNd = getVal(params, "skyNode", document.body);

  const moonlitEvening = {
    skyColor1: "#2B3C46",
    skyColor2: "#3363A1",
    flakeColors: ["#61899e", "#61899e"]
  };

  try {
    window.addEventListener("DOMContentLoaded", domContentLoaded);

    function domContentLoaded(evt) {
      try {
        CANVAS_WIDTH = screen.width + BLOW_DISTANCE * 2;
        CANVAS_HEIGHT = screen.height + 100;
        let bSkyStyleBuilt = false;
        let sSnowySkyClass = "snowySky";

        if (typeof SimpleParallax !== "undefined") {
          simpleParallax = new SimpleParallax({
            maxMovement: BLOW_DISTANCE * 2
          });
          b.........完整代码请登录后点击上方下载按钮下载查看

网友评论0