HTML流星雨-LMLPHP

目录

写在前面

完整代码

代码分析

系列文章

写在最后


写在前面

岁月如梭,光阴似箭,不知不觉暑假就要来喽,本期小编用HTML给大家手搓了一个炫酷的流星雨动画,一起来看看吧。

完整代码

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>流星雨</title>
  <style>
    body {
      background-color: black;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .star {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0.2;
      border: 2px solid transparent;
      border-bottom: 4px solid #fff;
      animation: flash 2s infinite linear;
    }

    .star::before {
      content: "";
      position: absolute;
      left: -2px;
      top: 4px;
      border: 2px solid transparent;
      border-top: 4px solid #fff;
    }

    @keyframes flash {
      20% {
        opacity: 0.2;
      }

      40% {
        opacity: 0.5;
      }

      60% {
        opacity: 1;
      }

      80% {
        opacity: 0.5;
      }

      100% {
        opacity: 0.2;
      }
    }
</style>
</head>

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

  <script type="text/javascript">
    var starCount = 300;
    var context;
    function starInit() {
      var bg = document.querySelector("body");
      for (var i = 0; i < starCount; i++) {
        var star = document.createElement("div");
        star.classList.add("star");
        bg.appendChild(star);
      }
    }
    function starPosition() {
      var stars = document.querySelectorAll(".star");
      for (var i = 0; i < starCount; i++) {
        stars[i].style.left = Math.random() * window.innerWidth + "px";
        stars[i].style.top = Math.random() * window.innerHeight + "px";
        stars[i].style.animationDelay = Math.random() * 10 + "s";
      }
    }

    function init() {
      var Meteor = document.getElementById("Meteor");
      Meteor.width = window.innerWidth;
      Meteor.height = window.innerHeight;
      context = Meteor.getContext("2d");
    }

    function MeteorRain() {
      this.x = Math.random() * window.innerWidth;
      this.y = Math.random() * window.innerHeight;
      this.length = Math.ceil(Math.random() * 80 + 150);
      this.angle = 30;
      this.cos = Math.cos((this.angle * 3.14) / 180);
      this.sin = Math.sin((this.angle * 3.14) / 180);
      this.width = this.length * this.cos;
      this.height = this.length * this.sin;
      this.speed = Math.ceil(Math.random() + 0.5);
      this.shifting_x = this.speed * this.cos;
      this.shifting_y = this.speed * this.sin;

      this.countPos = function () {
        this.x = this.x - this.shifting_x;
        this.y = this.y + this.shifting_y;
      };
      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.5, "grey");
        line.addColorStop(1.0, "black");
        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.shifting_x;
        var y = this.y - this.height + this.shifting_y;
        context.clearRect(
          x - 3,
          y - 3,
          this.shifting_x + 5,
          this.shifting_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();
        }
      }
      setTimeout("playRains()", 2);
    }
    var rainCount = 20;
    var rains = new Array();
    init();
    starInit();
    starPosition();
    for (var i = 0; i < rainCount; i++) {
      var rain = new MeteorRain();
      rain.draw();
      rains.push(rain);
    }
    playRains();
</script>
</body>

</html>

代码分析

这段代码创建了一个流星雨动画,通过HTML、CSS和JavaScript实现。下面是对代码的详细分析。

HTML结构

  • <html><head><body>:标准的HTML结构,包含文档的头部和主体。

  • <meta charset="UTF-8">:设置字符编码为UTF-8,并使页面适应不同设备的宽度。

  • <title>流星雨</title>:设置网页标题为“流星雨”。

  • <canvas id="Meteor"></canvas>:使用canvas元素绘制流星。

  • <script type="text/javascript">: 包含JavaScript代码,用于动态创建流星雨效果。

CSS样式

  • body: 背景色设置为黑色,宽度和高度为100%,隐藏溢出的内容。

  • .star: 定义星星的样式。星星是绝对定位的,初始宽高为0,透明度为0.2,边框透明,底部边框为白色。使用了一个2秒无限循环的闪烁动画。

  • .star::before: 为星星增加一个小白色部分,进一步增强星星的视觉效果。

  • @keyframes flash: 定义星星的闪烁动画,透明度在0.2到1之间变化。

JavaScript代码

  • var starCount = 300;: 定义星星的数量。

  • var context;: 全局变量,用于存储canvas的上下文。

starInit函数
  • starInit(): 初始化星星,向body中添加300个.star元素。

starPosition函数
  • starPosition(): 设置每个星星的位置和动画延迟,使它们在页面上的位置和闪烁时间随机化。

init函数
  • init(): 初始化canvas的宽度和高度,并获取其2D绘图上下文。

MeteorRain函数
  • MeteorRain(): 构造函数,用于创建一个流星。每个流星有随机的起始位置、长度、角度和速度。计算流星的宽度和高度,以及移动时的水平和垂直位移。

  • countPos(): 更新流星的位置,使其沿对角线移动。

  • draw(): 绘制流星。使用线性渐变颜色,使流星从白色到灰色到黑色渐变。

  • move(): 移动流星,并清除它之前的位置,使动画流畅。流星移动后透明度逐渐降低,重新绘制流星。

playRains函数
  • playRains(): 控制所有流星的移动。如果流星超出屏幕,则重新生成一个新的流星。通过setTimeout实现循环调用,以保持动画持续。

主程序

  • 初始化canvas和星星的位置。

  • 创建20个流星对象,并绘制初始状态。

  • 启动流星雨动画,通过反复调用playRains函数实现流星的连续移动。

整体功能

这段代码通过结合CSS和JavaScript,实现了一个流星雨的动画效果。背景是黑色的夜空,点缀着随机闪烁的星星。流星从随机位置出现,沿对角线下落,并逐渐消失。整个动画效果流畅,给人一种美丽的视觉体验。

总结起来,这段代码通过HTML结构创建基础页面,CSS定义静态元素的样式和动画,JavaScript负责动态生成和控制流星雨的动画效果,三者结合呈现出流星雨的视觉效果。

系列文章

写在最后

感谢你的喜欢,咱们下期见!

06-29 15:35