HTML+css+js实现雪花效果

最新推荐文章于 2024-02-16 16:37:17 发布

yejaren

最新推荐文章于 2024-02-16 16:37:17 发布

阅读量167

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_45892623/article/details/123591655

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      background: #081d4d;
      overflow: hidden;
    }

    #vas {
      position: absolute;
      vertical-align: top;
      z-index: 1000;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <canvas id="vas"></canvas>

</body>
<script>
  (function () {
    var can = document.getElementById("vas");
    var widths = document.documentElement.clientWidth || document.body.clientWidth;
    var heights = document.documentElement.clientHeight || document.body.clientHeight;
    can.width = widths;
    can.height = heights;
    var conm = 1000;
    var ctx = can.getContext("2d");
    ctx.fillStyle = "#fff";
    var Snowflake = function () {
      this.x = 0;
      this.y = 0;
      this.vy = 0;
      this.vx = 0;
      this.r = 0;
      this.reset();
    };
    Snowflake.prototype.reset = function () {
      this.x = Math.random() * widths;
      this.y = Math.random() * -heights;
      this.vy = 1 + Math.random() * 3;
      this.vx = 0.5 - Math.random();
      this.r = 1 + Math.random() * 2;
      this.o = 0.5 + Math.random() * 0.5;
    };
    var snowflakes = [],
      snowflake;
    for (i = 0; i < conm; i++) {
      snowflake = new Snowflake();
      snowflakes.push(snowflake);
    }
    setInterval(function () {
      ctx.clearRect(0, 0, widths, heights);
      for (i = 0; i < conm; i++) {
        snowflake = snowflakes[i];
        snowflake.y += snowflake.vy;
        snowflake.x += snowflake.vx;
        ctx.globalAlpha = snowflake.o;
        ctx.beginPath();
        ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
        if (snowflake.y > heights) {
          snowflake.reset();
        }
      }
    }, 10);
  }());
</script>

</html>

yejaren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+css+js实现雪花效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.
复制链接

扫一扫