用html生成代码雨
HTML代码雨效果实现
我将创建一个使用Canvas实现的代码雨视觉效果，模拟电影《黑客帝国》中的经典数字雨效果。
设计思路：
- 使用HTML5 Canvas作为画布
- 创建垂直下落的字符流（数字和字母）
- 每个字符流有不同的速度和亮度
- 实现字符的渐变颜色和尾迹效果
- 添加响应式设计适应不同屏幕尺寸
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码雨效果 - 黑客帝国风格</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
overflow: hidden;
font-family: 'Courier New', monospace;
color: #0f0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#canvas {
display: block;
background-color: #000;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.title {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: 30px;
text-shadow: 0 0 10px #0f0;
padding: 20px;
background-color: rgba(0, 20, 0, 0.6);
border-radius: 10px;
border: 1px solid #0f0;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
letter-spacing: 3px;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.8;
}
.controls {
position: relative;
z-index: 2;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
padding: 15px;
background-color: rgba(0, 20, 0, 0.5);
border-radius: 10px;
max-width: 90%;
}
button {
background-color: #000;
color: #0f0;
border: 1px solid #0f0;
padding: 10px 20px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background-color: #0f0;
color: #000;
box-shadow: 0 0 15px #0f0;
}
.info {
position: relative;
z-index: 2;
margin-top: 20px;
text-align: center;
max-width: 800px;
padding: 15px;
background-color: rgba(0, 20, 0, 0.5);
border-radius: 10px;
font-size: 0.9rem;
line-height: 1.5;
}
.footer {
position: absolute;
bottom: 20px;
z-index: 2;
color: #0a0;
font-size: 0.8rem;
opacity: 0.7;
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.subtitle {
font-size: 1rem;
}
.controls {
flex-direction: column;
align-items: center;
}
button {
width: 200px;
}
}
</style>
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
<div class="title">
<h1>代码雨</h1>
<div class="subtitle">黑客帝国风格数字雨模拟</div>
</div>
<div class="controls">
<button id="startBtn">开始代码雨</button>
<button id="stopBtn">暂停代码雨</button>
<button id="speedUpBtn">加速</button>
<button id="slowDownBtn">减速</button>
<button id="densityUpBtn">增加密度</button>
<button id="densityDownBtn">减少密度</button>
</div>
<div class="info">
<p>这个效果使用HTML5 Canvas模拟了电影《黑客帝国》中的代码雨。每个下落的字符流由随机生成的数字和字母组成，具有不同的速度和亮度。</p>
<p>点击上方按钮可以控制代码雨的效果。当前设置：<span id="speedDisplay">中速</span> | <span id="densityDisplay">中密度</span></p>
</div>
<div class="footer">
使用HTML5 Canvas实现 | 点击画布可以切换字符颜色
</div>
</div>
<script>
// 获取Canvas元素和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置Canvas尺寸为窗口尺寸
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// 初始调整Canvas尺寸
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 字符集 - 包含数字、英文字母和一些特殊符号
const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// 代码雨滴类
class CodeRain {
constructor() {
this.x = 0;
this.y = 0;
this.speed = 0;
this.charSize = 0;
this.chars = [];
this.charCount = 0;
this.brightness = 0;
this.reset();
}
// 重置雨滴属性
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * -canvas.height;
this.speed = 2 + Math.random() * 8;
this.charSize = 14 + Math.random() * 10;
this.charCount = 10 + Math.floor(Math.random() * 20);
this.chars = [];
this.brightness = 0.1 + Math.random() * 0.9;
// 为雨滴生成随机字符
for (let i = 0; i < this.charCount; i++) {
this.chars.push(chars[Math.floor(Math.random() * chars.length)]);
}
}
// 更新雨滴位置
update() {
this.y += this.speed;
// 如果雨滴完全移出屏幕底部，重置它
if (this.y > canvas.height + this.charCount * this.charSize) {
this.reset();
}
}
// 绘制雨滴
draw() {
// 设置字符颜色和透明度
const alpha = this.brightness;
// 绘制每个字符
for (let i = 0; i < this.chars.length; i++) {
// 计算字符位置
const charY = this.y - i * this.charSize;
// 如果字符在屏幕外，跳过
if (charY < -所有内容均由人工智能模型生成，其生成内容的准确性和完整性无法保证，不代表我们的态度或观点。