目录
写在前面
完整代码
代码分析
系列文章
写在最后
写在前面
岁月如梭,光阴似箭,不知不觉暑假就要来喽,本期小编用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负责动态生成和控制流星雨的动画效果,三者结合呈现出流星雨的视觉效果。
系列文章
序号 | 目录 | 直达链接 |
1 | HTML实现3D相册 | HTML实现3D相册-CSDN博客 |
2 | HTML元素周期表 | HTML元素周期表-CSDN博客 |
3 | HTML黑客帝国字母雨 | HTML黑客帝国字母雨_字母雨html-CSDN博客 |
4 | HTML五彩缤纷的爱心 | HTML五彩缤纷的爱心-CSDN博客 |
5 | HTML飘落的花瓣 | HTML飘落的花瓣-CSDN博客 |
6 | HTML哆啦A梦 | HTML哆啦A梦_html哆啦a梦代码-CSDN博客 |
7 | HTML爱情树 | HTML爱情树-CSDN博客 |
8 | HTML新春烟花盛宴 | HTML新春烟花盛宴-CSDN博客 |
9 | HTML想见你 | HTML想见你-CSDN博客 |
10 | HTML蓝色爱心 | HTML蓝色爱心-CSDN博客 |
11 | HTML跳动的爱心 | HTML跳动的爱心-CSDN博客 |
12 | HTML橙色爱心 | HTML橙色爱心-CSDN博客 |
13 | HTML大雪纷飞 | HTML大雪纷飞-CSDN博客 |
14 | HTML跨年烟花 | HTML跨年烟花-CSDN博客 |
15 | HTML跳动的爱心 | HTML跳动的爱心-CSDN博客 |
16 | HTML动态爱心 | HTML动态爱心-CSDN博客 |
17 | HTML浪漫星空 | HTML星空特效-CSDN博客 |
18 | HTML跳动的双爱心 | https://want595.blog.csdn.net/article/details/139799806 |
19 | HTML流星雨 | https://want595.blog.csdn.net/article/details/140035380 |
20 | ||
21 | ||
22 | ||
23 | ||
24 | ||
25 | ||
26 | ||
27 |
写在最后
感谢你的喜欢,咱们下期见!