写在前面
小编准备了一个五彩缤纷的爱心，送给各位小美女们~
在桌面创建一个.txt文本文件，把代码复制进去，将后缀.txt改为.html，然后就可以双击运行啦！
HTML简介
HTML（超文本标记语言）是一种用于创建网页的标记语言。它描述了网页的结构和内容，并使用标记来定义文本、图像和其他元素的展示方式。HTML使用标签和属性来标记和组织网页的不同部分，如标题、段落、图片、链接等。这些标记和属性告诉浏览器如何显示网页的内容和布局。HTML是Web开发的基础，与CSS和JavaScript一起使用可以创建丰富的交互式网页。通过使用不同的标签和属性，开发者可以创建具有不同样式和功能的网页。HTML是一种可扩展的语言，可以根据需要添加自定义的标签和属性。
爱心代码
<!DOCTYPE html>
<html>
<head>
<title>五彩缤纷的爱心</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background: #222;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
h1 {
font-size: 50em;
margin: 100px auto;
animation: rainbow 5s ease-in-out infinite;
}
@keyframes rainbow {
0% {
color: #ff0000;
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
}
25% {
color: #ff8000;
text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000, 0 0 30px #ff8000;
}
50% {
color: #ffff00;
text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00;
}
75% {
color: #00ff00;
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
}
100% {
color: #0000ff;
text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;
}
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<h1>❤</h1>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class TextElement {
constructor(text, x, y, fontSize, color, dx = 0, dy = 0, speed = 1) {
this.text = text;
this.x = x;
this.y = y;
this.fontSize = fontSize;
this.color = color;
this.dx = dx;
this.dy = dy;
this.speed = speed;
}
draw() {
ctx.font = `${this.fontSize}px Arial`;
ctx.fillStyle = this.color;
ctx.fillText(this.text, this.x, this.y);
}
update() {
if (this.x > canvas.width || this.x < 0) {
this.dx = -this.dx;
}
if (this.y > canvas.height || this.y < 0) {
this.dy = -this.dy;
}
this.x += this.dx * this.speed;
this.y += this.dy * this.speed;
}
}
function init() {
for (let i = 0; i < 99; i++) {
const fontSize = Math.random() * 50 + 10;
const text = '❤';
const x = Math.random() * (canvas.width - fontSize * 2);
const y = Math.random() * (canvas.height - fontSize * 2);
const color = `hsla(${Math.random() * 360}, 100%, 50%, 0.8)`;
const dx = Math.random() - 0.5;
const dy = Math.random() - 0.5;
const speed = Math.random() * 5 + 1;
textElements.push(new TextElement(text, x, y, fontSize, color, dx, dy, speed));
}
}
const textElements = [];
init();
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
textElements.forEach((textElement) => {
textElement.draw();
textElement.update();
});
}
animate();
</script>
</body>
</html>代码分析
这段代码是一个HTML页面，用于创建一个精彩的爱心动画。整体上，它由HTML结构、CSS样式以及JavaScript脚本三部分组成：
1. HTML结构：
- 页面头部设置了`<title>`标签，标题为“五彩缤纷的爱心”。
- 页面主体包含两个元素：一个`<canvas>`元素和一个`<h1>`元素。其中，`<canvas>`用于绘制图形，而`<h1>`中显示了一个爱心字符（❤）并应用了彩虹渐变动画。
2. CSS样式：
- 全局样式设置了整个body背景色为深灰色（#222），使其充满整个屏幕，并通过flex布局居中内容。
- 对`<canvas>`元素进行了定位设置，使其铺满整个浏览器窗口。
- 对`<h1>`元素设置了非常大的字体大小（50em），并应用了一个名为`rainbow`的关键帧动画，这个动画会每5秒循环一次，使爱心字符的颜色从红色渐变到橙色、黄色、绿色，最终变为蓝色，同时伴随着强烈的彩色阴影效果。
3. JavaScript脚本：
- 获取`<canvas>`元素并初始化其上下文（`2d`环境）以便进行绘画操作。
- 设置画布尺寸与浏览器窗口相同。
- 定义了一个名为`TextElement`的类，表示文本元素，具有位置、字体大小、颜色、速度和方向等属性，并定义了`draw()`和`update()`方法，分别用于在画布上绘制和更新该元素的位置。
- `init()`函数负责初始化99个随机生成的爱心文本元素（'❤'字符），这些元素的位置、大小、颜色、移动速度和方向都是随机产生的。
- 创建一个空数组`textElements`来存储所有生成的文本元素。
- 调用`init()`函数填充`textElements`数组。
- 定义`animate()`函数，它利用`requestAnimationFrame`创建一个动画循环，每一帧都会清除画布，然后遍历并更新、重绘所有的文本元素。
- 最后调用`animate()`函数启动动画循环。
综上所述，这段代码实现了一个动态网页，网页上有一个全屏的画布，在画布上有许多不同大小、颜色、速度和方向不断运动的爱心字符，与此同时，页面顶部还有一颗固定的大爱心字符呈现炫丽的彩虹渐变效果。
系列推荐
写在最后
我是一只有趣的兔子，感谢你的喜欢！