HTML流星雨

目录

写在前面

完整代码

代码分析

系列文章

写在最后

写在前面

岁月如梭，光阴似箭，不知不觉暑假就要来喽，本期小编用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负责动态生成和控制流星雨的动画效果，三者结合呈现出流星雨的视觉效果。

系列文章

序号目录直达链接
1HTML实现3D相册HTML实现3D相册-CSDN博客
2HTML元素周期表HTML元素周期表-CSDN博客
3HTML黑客帝国字母雨HTML黑客帝国字母雨_字母雨html-CSDN博客
4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客
5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客
6HTML哆啦A梦HTML哆啦A梦_html哆啦a梦代码-CSDN博客
7HTML爱情树HTML爱情树-CSDN博客
8HTML新春烟花盛宴HTML新春烟花盛宴-CSDN博客
9HTML想见你HTML想见你-CSDN博客
10HTML蓝色爱心HTML蓝色爱心-CSDN博客
11HTML跳动的爱心HTML跳动的爱心-CSDN博客
12HTML橙色爱心HTML橙色爱心-CSDN博客
13HTML大雪纷飞HTML大雪纷飞-CSDN博客
14HTML跨年烟花HTML跨年烟花-CSDN博客
15HTML跳动的爱心HTML跳动的爱心-CSDN博客
16HTML动态爱心HTML动态爱心-CSDN博客
17HTML浪漫星空HTML星空特效-CSDN博客
18HTML跳动的双爱心https://want595.blog.csdn.net/article/details/139799806
19HTML流星雨https://want595.blog.csdn.net/article/details/140035380
20
21
22
23
24
25
26
27

写在最后

感谢你的喜欢，咱们下期见！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/37007.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

项目风险管理系统有哪些？分享11款主流项目管理系统

项目风险管理系统有哪些？分享11款主流项目管理系统

本文将分享11款主流项目管理系统&#xff1a;PingCode、Worktile、StandardFusion、MasterControl、ClickUp、SAI360、Netwrix Auditor、MetricStream、Wrike、Celoxis、Zoho Projects。 在项目管理中&#xff0c;风险管理不仅是一个挑战&#xff0c;也是保证项目顺利进行的关键…
阅读更多...
探索Vim的文本处理能力：精通查找与替换

探索Vim的文本处理能力：精通查找与替换

探索Vim的文本处理能力&#xff1a;精通查找与替换 Vim&#xff0c;作为Linux终端下的王牌文本编辑器&#xff0c;以其强大的功能和灵活性深受开发者和系统管理员的喜爱。在Vim中进行查找和替换是文本编辑中的一项基础且重要的操作。本文将详细解释如何在Vim中执行查找和替换文…
阅读更多...
Linux Redis 服务设置开机自启动

Linux Redis 服务设置开机自启动

文章目录 前言一、准备工作二、操作步骤2.1 修改redis.conf文件2.2 创建启动脚本2.3 设置redis 脚本权限2.4 设置开机启动2.5 验证 总结 前言 请各大网友尊重本人原创知识分享&#xff0c;谨记本人博客&#xff1a;南国以南i、 提示&#xff1a;以下是本篇文章正文内容&#x…
阅读更多...
编程的难点在哪？是逻辑、算法，还是模块、框架的掌握？

编程的难点在哪？是逻辑、算法，还是模块、框架的掌握？

&#x1f446;点击关注 回复『新人礼』获取学习礼包&#x1f446; 很多新手程序员在一开始都是满怀热情地投入到编程的学习&#xff0c;但却在学习过程中处处碰壁&#xff0c;导致放弃。 编程的难点在于逻辑、数学、算法&#xff0c;还是模块、框架、接口的掌握&#xff1f;但…
阅读更多...
idea Error running ‘Application‘

idea Error running ‘Application‘

1、Error running ‘Application’ Error running ApplicationError running Application. Command line is too long.Shorten the command line via JAR manifest or via a classpath file and rerun.找到 .idea/libraies/workspace.xml 中的 PropertiesComponent 属性&#…
阅读更多...
Android InputDispatcher分发输入事件

Android InputDispatcher分发输入事件

派发循环是指 InputDispatcher 不断地派发队列取出事件&#xff0c;寻找合适的窗口并进行发送的过程&#xff0c;是 InputDispatcher 线程的主要工作 事件发送循环是 InputDispatcher 通过 Connection 对象将事件发送给窗口&#xff0c;并接受其反馈的过程 InputDispatcher —…
阅读更多...
Spring Boot跨域请求关键处理技术解析

Spring Boot跨域请求关键处理技术解析

Spring Boot跨域请求关键处理技术解析 在Web开发中&#xff0c;跨域请求是一个常见问题&#xff0c;尤其在微服务架构和前后端分离的开发模式中更为突出。Spring Boot作为一种流行的Java Web框架&#xff0c;提供了多种解决跨域请求的方法。本文将详细解析Spring Boot中跨域请…
阅读更多...
在 Qt 中设置 QMainWindow 的大小

在 Qt 中设置 QMainWindow 的大小

问题描述 一位 Qt 新手提问&#xff0c;是否有办法将 QMainWindow 的大小设置为用户桌面大小的 70%。他尝试过使用伸缩因子&#xff0c;但未成功。QWidget::setFixedSize 可以工作&#xff0c;但只能使用像素值。 解决方案 方案一&#xff1a;使用 QDesktopWidget 在 QMain…
阅读更多...
大模型赋能全链路可观测性：运维效能的革新之旅

大模型赋能全链路可观测性：运维效能的革新之旅

目录 全链路可观测工程与大模型结合---提升运维效能 可观测性&#xff08;Observability&#xff09;在IT系统中的应用及其重要性 统一建设可观测数据 统一建设可观测数据的策略与流程 全链路的构成和监控形态 云上的全链路可视方案 为什么一定是Copilot 大模型的Copilo…
阅读更多...
mov和mp4区别是什么？苹果的原创和时代的宠儿

mov和mp4区别是什么？苹果的原创和时代的宠儿

在数字媒体领域&#xff0c;视频格式的选择往往决定了观看体验的质量和文件的兼容性。在众多视频格式中&#xff0c;MOV和MP4无疑是最具代表性的两种&#xff0c;它们分别承载着苹果和互联网世界的技术革新与历史变迁。本文将带您穿越时间的长廊&#xff0c;探索MOV与MP4的发展…
阅读更多...
A : 平面划分

A : 平面划分

Description 一条直线可以把平面分成两部分&#xff0c;两条直线分成四部分。那么 n 条直线最多可以把平面分成几部分&#xff1f; Input 多组数据&#xff0c;每组数据一个正整数 1≤&#xfffd;≤1000。 Output Sample #0 Input Copy 3 5 Output Copy 7 16 Hin…
阅读更多...
区间DP——AcWing 320. 能量项链

区间DP——AcWing 320. 能量项链

区间DP 定义 区间动态规划&#xff08;Interval Dynamic Programming&#xff09;&#xff0c;简称区间DP&#xff0c;是动态规划领域的一个重要分支&#xff0c;专门用于解决涉及区间问题的最优化问题。这类问题通常需要在给定的一组区间上找到最优解&#xff0c;比如求解最…
阅读更多...
福兰农庄携手越南NFC巨头朱雀桥薇妮她百香果饮料，深化品质合作

福兰农庄携手越南NFC巨头朱雀桥薇妮她百香果饮料，深化品质合作

近日&#xff0c;国内知名果汁品牌福兰农庄成功与越南NFC行业领军者朱雀桥建立深入合作关系。为了进一步提升产品品质和市场竞争力&#xff0c;福兰农庄派遣专业团队前往越南&#xff0c;深入VINUT百香果饮料的生产线&#xff0c;学习其从原料采购到产品上市的严格操作流程。 在…
阅读更多...
IAR 常见报错与实用小技巧（ZigBee）

IAR 常见报错与实用小技巧（ZigBee）

一、报错 1.未发现选择目标 原因&#xff1a;硬件连接存在问题 解决方案&#xff1a;将数据线重新插拔或更换接口、数据线 2. 烧录终止 原因&#xff1a;烧录前未点击仿真器复位按钮 解决方案&#xff1a; 进行烧录前点击仿真器复位按钮&#xff08;下载过程中不能按&#xff…
阅读更多...
数据结构与算法 - 图

数据结构与算法 - 图

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 图的定义和基本概念&#xff1a; 图&#xff08;Graph&#xff09;是一种由…
阅读更多...
java+mysql图书管理系统

java+mysql图书管理系统

完整代码地址 1.运行效果图 2.主要代码 2.1.连接数据库 package com.my.homework.utils;import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException;public class JDBCUtils {public static Connection getConnection() throws Exception {…
阅读更多...
Linux内核 -- Clocksource的注册与使用

Linux内核 -- Clocksource的注册与使用

Linux Clocksource 使用教程 本文档介绍了如何在Linux内核中实现和使用clocksource&#xff0c;并提供了内核态和用户态使用clocksource的示例代码。 1. Clocksource 驱动实现 以下是一个简单的基于周期计数器的clocksource驱动实现示例。 1.1 定义clocksource结构体 #inc…
阅读更多...
使用SQLMap进行SQL注入测试

使用SQLMap进行SQL注入测试

使用SQLMap进行SQL注入测试 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 什么是SQL注入&#xff1f; SQL注入是一种常见的Web应用程序安全漏洞&#xff0c…
阅读更多...
点云处理实战 点云平面拟合

点云处理实战 点云平面拟合

目录 一、什么是平拟合 二、拟合步骤 三、数学原理 1、平面拟合 2、PCA过程 四、代码 一、什么是平拟合 平面拟合是指在三维空间中找到一个平面，使其尽可能接近给定的点云。最小二乘法是一种常用的拟合方法，通过最小化误差平方和来找到最优的拟合平面。 二、拟合步骤…
阅读更多...
keepalived脑裂和haproxy

keepalived脑裂和haproxy

1.用keepalived管理nginx服务 7-1和7-2配置 #安装nginx systemctl stop firewalld setenforce 0 yum install epel-release.noarch -y yum install -y nginx systemctl start nginxvim /etc/nginx/nginx.confupstream web {server 192.168.91.102;server 192.168.91.10…
阅读更多...
最新文章

Copyright @ 2022~2023