目錄
寫在前面
完整代碼
代碼分析
系列文章
寫在最后
寫在前面
歲月如梭，光陰似箭，不知不覺暑假就要來嘍，本期小編用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 |
寫在最后
感謝你的喜歡，咱們下期見！
