HTML炫酷數字雨代碼是一種讓人眼前一亮的效果，在網頁開發中非常實用。數字雨源于電影《黑客帝國》中的一個場景，這個特效非常具有視覺沖擊力，可以讓網頁更加炫酷。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數字雨</title>
<style>
body {
background-color: #000;
}
#matrix {
color: white;
font-size: 2em;
font-family: "Courier New", Courier, monospace;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div id="matrix"></div>
<script>
var matrix = document.getElementById("matrix");
var text = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
text = text.split("");
var speed = 25; // 每25ms補全一個字符
var time;
function random(min, max) { // 生成min到max之間的隨機數
return Math.floor(Math.random() * (max - min)) + min;
}
function init() {
for (var i = 0; i < 80; i++) { // 一行80個字符
var span = document.createElement("span");
span.style.opacity = "0.2";
span.style.position = "absolute";
span.style.left = i * 10 + "px";
span.innerHTML = text[random(0, text.length)];
matrix.appendChild(span);
}
time = setInterval(function() {
for (var i = 0; i < 80; i++) {
var span = matrix.getElementsByTagName("span")[i];
if (span.offsetTop >= 600) { // 跑到底部
span.style.top = "0px";
span.innerHTML = text[random(0, text.length)];
}
span.style.top = span.offsetTop + 50 + "px";
}
}, speed);
}
init();
</script>
</body>
</html>該HTML代碼中，在style標簽中定義了數字雨的樣式。其中，background-color定義了網頁背景顏色；color、font-size和font-family定義了數字雨的樣式，包括顏色、字體大小、字體類型等；position、top、left和transform屬性定義了數字雨的位置，使其居中在頁面中間；overflow和height屬性定義了數字雨的高度和溢出方式；line-height屬性定義了每行字符之間的間距。
通過script標簽中的JavaScript代碼實現了數字雨的效果，包括隨機生成字符、移動字符和重置字符位置。這些功能通過setInterval和setTimeout實現，其中setInterval用于定時調用需要執行的函數，而setTimeout則是延時調用函數。這些函數中，通過getElementById獲取頁面元素，并使用createElement動態創建元素，定義元素的樣式和位置等屬性，從而實現了數字雨的效果。
上一篇Vue怎么 引入字體
下一篇html炫酷文字源代碼