星空奇旅：用HTML5和CSS动画打造流星划过

2023-09-10 15:17:31

用 HTML5 和 CSS 动画打造星际盛宴

准备好探索宇宙的奥秘了吗？让我们踏上用 HTML5 和 CSS 动画打造星际盛宴的奇妙旅程吧！

绘制璀璨星空

借助 HTML5 的 canvas 元素，你可以成为星际艺术家，绘制一幅浩瀚的星空。JavaScript 的神奇力量将助你描绘出闪烁的星光。

<canvas id="stars"></canvas>

#stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  top: random(0, 100)%;
  left: random(0, 100)%;
  width: 1px;
  height: 1px;
  background-color: white;
  animation: twinkle 1s infinite alternate;
}

@keyframes twinkle {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

var canvas = document.getElementById("stars");
var ctx = canvas.getContext("2d");

var numStars = 100;

for (var i = 0; i < numStars; i++) {
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;

  ctx.fillStyle = "white";
  ctx.fillRect(x, y, 1, 1);
}

流星划过夜空

现在，让我们为你的星空增添一些动感。用 CSS 动画创建一个流星，让它划破夜空，留下炫目的轨迹。

<div class="meteor"></div>

.meteor {
  position: absolute;
  top: -100px;
  left: random(0, 100)%;
  width: 10px;
  height: 10px;
  background-color: white;
  animation: meteor 1s linear infinite;
}

@keyframes meteor {
  0% {
    top: -100px;
    opacity: 1;
  }

  50% {
    top: 100%;
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

var meteor = document.querySelector(".meteor");

setInterval(function() {
  meteor.style.left = random(0, 100) + "%";
  meteor.style.animationPlayState = "running";

  setTimeout(function() {
    meteor.style.animationPlayState = "paused";
  }, 1000);
}, 3000);