流星雨效果

文章目录

html + css实现
js+canvas实现

html + css实现

对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。
带有前缀 – 的属性名，比如 --example–name，表示的是带有值的自定义属性，其可以通过 var() 函数在全文档范围内复用的。
perspective: 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果
transform-style:设置元素的子元素是位于 3D 空间中还是平面中。
高斯模糊： filter: blur(10px);

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <!-- 带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var() 函数在全文档范围内复用的。 -->
      <div class="line" style="--color: #ffcdc6; --x: 3; --z: 3; --d: 1"></div>
      <div class="line" style="--color: #fff; --x: 3; --z: 2; --d: 2"></div>
      <div class="line" style="--color: #fff; --x: 4; --z: 1; --d: 3"></div>
      <div class="line" style="--color: #ffffff; --x: 4; --z: 0; --d: 1"></div>
      <div
        class="line"
        style="--color: rgb(250, 255, 174); --x: 6; --z: -1; --d: 2"
      ></div>
      <div class="line" style="--color: #b7dfff; --x: 6; --z: -2; --d: 3"></div>
      <div class="line" style="--color: #fff; --x: 8; --z: -3; --d: 1"></div>
      <div class="line" style="--color: #fff; --x: 10; --z: -4; --d: 2"></div>
      <div
        class="line"
        style="--color: #ffffff; --x: 12; --z: -5; --d: 3"
      ></div>
      <div class="line" style="--color: #fff; --x: 14; --z: -6; --d: 1"></div>
      <div class="line" style="--color: #fff; --x: 16; --z: -7; --d: 2"></div>
      <div class="line" style="--color: #fff; --x: 18; --z: -8; --d: 3"></div>
      <div
        class="line"
        style="--color: #f4c0ff; --x: 20; --z: -9; --d: 1"
      ></div>
    </div>
  </body>
  <style>
    /* 对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。 */
    :root {
      --background-color: #2c3e50;
    }
    * {
      margin: 0;
      padding: 0;
    }
    html {
      font-size: 14px;
    }
    body {
      width: 100vw;
      height: 100vh;
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container {
      position: relative;
      width: 100vw;
      height: 100vh;
      background-color: #000;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      /* perspective: 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果 */
      perspective: 800px;
      /* transform-style:设置元素的子元素是位于 3D 空间中还是平面中。 */
      transform-style: preserve-3d;
    }
    .line {
      position: absolute;
      width: 200px;
      height: 3px;
      border-radius: 3px;
      background-image: linear-gradient(
        to right,
        var(--color),
        #ffffff50,
        transparent
      );
      animation: down 1s linear infinite both;
      animation-delay: calc(var(--d) * 0.3s);
    }
    .line::before,
    .line::after {
      position: absolute;
      content: "·";
      width: 10px;
      height: 10px;
      background-image: inherit;
    }
    .line::before {
      /* 高斯模糊 */
      filter: blur(5px);
    }
    .line::after {
      /* 高斯模糊 */
      filter: blur(10px);
    }
    @keyframes down {
      0% {
        transform: translateY(calc(var(--z) * 60px))
          translateZ(calc(var(--z) * 100px)) rotate(-45deg)
          translateX(calc(var(--x) * 100px));
      }
      100% {
        transform: translateY(calc(var(--z) * 60px))
          translateZ(calc(var(--z) * 100px)) rotate(-45deg)
          translateX(calc(var(--x) * -100px));
      }
    }
  </style>
</html>

js+canvas实现

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>流星雨</title>
    <script>
      // 画笔
      var context;
      //   装星星的容器
      var arr = new Array();
      //   星星数
      var starCount = 800;
      //   装流星雨的容器
      var rains = new Array();
      //   流星数
      var rainCount = 20;

      function init() {
        var stars = document.getElementById("stars");
        windowWidth = window.innerWidth; //当前的窗口的高度
        stars.width = windowWidth;
        stars.height = window.innerHeight;
        context = stars.getContext("2d");
      }

      //创建一个星星对象
      var Star = function () {
        this.x = windowWidth * Math.random(); //横坐标
        this.y = 5000 * Math.random(); //纵坐标
        this.text = Math.random() < 0.7 ? "." : "*"; //文本
        this.color = "white"; //颜色
        this.getColor = function () {
          var _r = Math.random();
          if (_r < 0.5) {
            this.color = "#333";
          } else {
            this.color = "white";
          }
        };
        //初始化
        this.init = function () {
          this.getColor();
        };
        //绘制
        this.draw = function () {
          context.fillStyle = this.color;
          context.fillText(this.text, this.x, this.y);
        };
      };

      //画月亮
      function drawMoon() {
        var moon = new Image();
        moon.src = "./images/moon.jpg";
        context.drawImage(moon, -5, -10);
      }
      //星星闪起来 (重新绘制星星达到一闪一闪的效果)
      function playStars() {
        for (var n = 0; n < starCount; n++) {
          arr[n].getColor();
          arr[n].draw();
        }

        setTimeout("playStars()", 300);
      }

      /*创建流星雨对象*/
      var MeteorRain = function () {
        this.x = -1;
        this.y = -1;
        this.length = -1; //流星长度
        this.angle = 30; //倾斜角度
        this.width = -1; //流星所占宽度
        this.height = -1; //流星所占高度
        this.speed = 1; //速度
        this.offset_x = -1; //横轴移动偏移量
        this.offset_y = -1; //纵轴移动偏移量
        this.alpha = 1; //透明度
        this.color1 = ""; //流星的色彩
        this.color2 = ""; //流星的色彩
        /****************初始化函数********************/
        this.init = function () //初始化
        {
          this.getPos();
          this.alpha = 1; //透明度
          this.getRandomColor();
          //最小长度，最大长度
          var x = Math.random() * 80 + 150;
          this.length = Math.ceil(x);
          // x = Math.random()*10+30;
          this.angle = 30; //流星倾斜角
          x = Math.random() + 0.5;
          this.speed = Math.ceil(x); //流星的速度
          var cos = Math.cos((this.angle * 3.14) / 180);
          var sin = Math.sin((this.angle * 3.14) / 180);
          this.width = this.length * cos; //流星所占宽度
          this.height = this.length * sin; //流星所占高度
          this.offset_x = this.speed * cos; //横轴移动偏移量
          this.offset_y = this.speed * sin; //纵轴移动偏移量
        };
        /**************获取随机颜色函数*****************/
        this.getRandomColor = function () {
          var a = Math.ceil(255 - 240 * Math.random());
          //中段颜色
          this.color1 = "rgba(" + a + "," + a + "," + a + ",1)";
          //结束颜色
          this.color2 = "black";
        };
        /***************重新计算流星坐标的函数******************/
        this.countPos = function () //
        {
          //往左下移动,x减少，y增加
          this.x = this.x - this.offset_x;
          this.y = this.y + this.offset_y;
        };
        /*****************获取随机坐标的函数*****************/
        this.getPos = function () //
        {
          //横坐标200--1200
          this.x = Math.random() * window.innerWidth + 200; //窗口宽度
          //纵坐标小于600
          this.y = Math.random() * window.innerHeight - 200; //窗口高度
        };
        /****绘制流星***************************/
        this.draw = function () //绘制一个流星的函数
        {
          context.save();
          context.beginPath();
          context.lineWidth = 1; //宽度
          context.globalAlpha = this.alpha; //设置透明度
          //创建横向渐变颜色,起点坐标至终点坐标
          var line = context.createLinearGradient(
            this.x,
            this.y,
            this.x + this.width,
            this.y - this.height
          );
          //分段设置颜色
          line.addColorStop(0, "white");
          line.addColorStop(0.3, this.color1);
          line.addColorStop(0.6, this.color2);
          context.strokeStyle = line;
          //起点
          context.moveTo(this.x, this.y);
          //终点
          context.lineTo(this.x + this.width, this.y - this.height);
          context.closePath();
          context.stroke();
          context.restore();
        };
        this.move = function () {
          //清除上一次显示的流星像素
          var x = this.x + this.width - this.offset_x;
          var y = this.y - this.height;
          context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);
          //重新计算位置，往左下移动
          this.countPos();
          //透明度增加
          this.alpha -= 0.002;
          //重绘
          this.draw();
        };
      };

      //流星移动
      function playRains() {
        for (var n = 0; n < rainCount; n++) {
          var rain = rains[n];
          rain.move(); //移动
          if (rain.y > window.innerHeight) {
            //超出界限后重来
            context.clearRect(
              rain.x,
              rain.y - rain.height,
              rain.width,
              rain.height
            );
            rains[n] = new MeteorRain();
            rains[n].init();
          }
        }
        setTimeout("playRains()", 2);
      }

      //页面加载的时候
      window.onload = function () {
        init();
        //画星星
        for (var i = 0; i < starCount; i++) {
          var star = new Star();
          star.init();
          star.draw();
          arr.push(star);
        }
        //画流星
        for (var i = 0; i < rainCount; i++) {
          var rain = new MeteorRain();
          rain.init();
          rain.draw();
          rains.push(rain);
        }
        drawMoon(); //绘制月亮
        playStars(); //绘制闪动的星星
        playRains(); //绘制流星
      };
    </script>
    <style type="text/css">
      body {
        background-color: black;
      }

      body,
      html {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="stars"></canvas>
  </body>
</html>