目录
写在前面
岁月如梭，光阴似箭，不知不觉暑假就要来喽，本期小编用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负责动态生成和控制流星雨的动画效果，三者结合呈现出流星雨的视觉效果。
系列文章
写在最后
感谢你的喜欢，咱们下期见！