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款主流项目管理系统&#xff1a;PingCode、Worktile、StandardFusion、MasterControl、ClickUp、SAI360、Netwrix Auditor、MetricStream、Wrike、Celoxis、Zoho Projects。 在项目管理中&#xff0c;风险管理不仅是一个挑战&#xff0c;也是保证项目顺利进行的关键…

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‘

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 属性&#…

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

目录 全链路可观测工程与大模型结合---提升运维效能 可观测性&#xff08;Observability&#xff09;在IT系统中的应用及其重要性 统一建设可观测数据 统一建设可观测数据的策略与流程 全链路的构成和监控形态 云上的全链路可视方案 为什么一定是Copilot 大模型的Copilo…

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

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

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

区间DP 定义 区间动态规划&#xff08;Interval Dynamic Programming&#xff09;&#xff0c;简称区间DP&#xff0c;是动态规划领域的一个重要分支&#xff0c;专门用于解决涉及区间问题的最优化问题。这类问题通常需要在给定的一组区间上找到最优解&#xff0c;比如求解最…

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

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

IAR 常见报错与实用小技巧(ZigBee)

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

数据结构与算法 - 图

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

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 {…

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

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

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…

笔记本电脑升级实战手册[1]:开始之前的准备与清单

文章目录 前言&#xff1a;一、升级流程1. 备份2. 清灰换硅脂3. 扩展内存与硬盘4. 硬盘设置5. 系统重装6. 升级后性能测试 二、升级清单1. 工具清单2. 升级清单 总结&#xff1a; 前言&#xff1a; 将要毕业之际&#xff0c;发现我的笔记本电脑已经陪我“征战沙场”快有四年之…

揭秘教学新利器:SmartEDA电路仿真软件,让电子学习更生动!

在数字化教育浪潮中&#xff0c;一款名为SmartEDA的电路仿真软件逐渐崭露头角&#xff0c;以其直观、易操作的特点&#xff0c;为电子学习领域带来了革命性的变化。今天&#xff0c;就让我们一起探讨如何使用SmartEDA进行教学&#xff0c;让电子学习变得更加生动有趣&#xff0…

Android源码——Handler机制(一)

Android源码——Handler机制&#xff08;一&#xff09; Handler机制概述介绍Handler机制模型Handler机制架构 Handler机制源码解析ActivityThreadLooperHandler Handler机制概述 介绍 Handler是Android消息机制的上层接口。Handler可以将一个任务切换到Handler所在的线程中去…

网络物理隔离后 可以用保密U盘进行数据安全交换吗?

企业用的保密U盘通常被设计用于存储和传输敏感信息&#xff0c;以确保数据的安全和保密性。 在网络之间实现了物理隔离后&#xff0c;使用保密U盘进行数据安全交换是一种常见的做法。物理隔离确保了两个网络之间的完全分离&#xff0c;因此使用保密U盘可以作为一种安全的手段来…

第1章 物联网模式简介---物联网概述

物联网模式简介 物联网&#xff08;IoT&#xff09;在最近几年获得了巨大的吸引力&#xff0c;该领域在未来几年将呈指数级增长。这一增长将跨越所有主要领域/垂直行业&#xff0c;包括消费者、家庭、制造业、健康、旅游和运输。这本书将为那些想了解基本物联网模式以及如何混…

【大模型】大模型微调方法总结(四)

1. P-Tuning v1 1.背景 大模型的Prompt构造方式严重影响下游任务的效果。比如&#xff1a;GPT-3采用人工构造的模版来做上下文学习&#xff08;in context learning&#xff09;&#xff0c;但人工设计的模版的变化特别敏感&#xff0c;加一个词或者少一个词&#xff0c;或者变…

用英文介绍美国总统Trump: Donald J. Trump Twice Impeached (2017 – 2021)

Donald J. Trump: Twice Impeached (2017 – 2021) Link: https://www.youtube.com/watch?vJ7RC2DKf6rs&listPLybg94GvOJ9E-ZM1U6PAjgPUmz-V4-Yja&index45 Summary Summary of Donald Trump’s Rise and Presidency Donald John Trump, originally from Queens, Ne…