小狮博客各位正在学习网页编程的同学们，今天编程狮（W3Cschool.cn）的前端团队将带大家打造一个浪漫的520爱心告白页面。这个项目综合运用了HTML、CSS和JavaScript知识，非常适合零基础的小伙伴练习。完成后，你可以将这个页面作为520礼物送给心爱的人，也可以作为编程作品展示你的学习成果。
项目效果预览
我们的目标页面包含：
- 中间的动态跳动爱心（带有心跳动画效果）
- 浪漫的诗意告白文字
- 点击页面任意位置生成爱心效果
- 自动下落的爱心雨（每300毫秒生成一个）
整个页面采用了粉色系主题，充满浪漫氛围，非常契合520这个特殊的日子。
HTML结构解析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
<title>W3Cschool编程狮 • 520爱心告白</title>
<meta name="description" content="编程狮(W3Cschool.cn)提供的浪漫520页面，包含动态爱心雨效果和诗意告白">
</head>
<body>
<div class="hearts"></div>
<div class="container">
<div class="heart">️</div>
<div class="message">
<p>在数不尽的星辰中</p>
<p>你是我唯一追寻的光</p>
<p>520 • 爱你每一天</p>
</div>
</div>
<footer>
Powered by 编程狮 • W3Cschool学习平台
<div>w3cschool.cn</div>
</footer>
</body>
</html>代码解析：
- 我们使用了语义化HTML标签，使页面结构清晰- 引入了谷歌字体库，提升文字显示效果
- 使用
viewport元标签确保页面在移动设备上良好显示 - 整体采用居中布局，主内容通过
position:absolute实现精准定位
CSS样式详解
body {
margin: 0;
height: 100vh;
background: #ffe6f2;
overflow: hidden;
position: relative;
font-family: 'Noto Sans SC', 'Source Han Sans', sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ff3366;
}
.heart {
font-size: 100px;
animation: pulse 1.2s infinite;
text-shadow: 0 0 20px rgba(255,51,102,0.5);
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}重点知识点：
- 响应式布局：使用
vh单位使页面高度适应不同屏幕尺寸 - 动画效果：通过
@keyframes定义心跳动画，实现爱心跳动效果 - 文字阴影：使用
text-shadow增加文字立体感 - 居中定位：
absolute+transform实现页面元素精确定位
JavaScript交互功能
function createHeart(x, y) {
const heart = document.createElement('div');
heart.innerHTML = '️';
heart.className = 'heart-fall';
heart.style.left = x + 'px';
heart.style.top = y + 'px';
heart.style.fontSize = Math.random() * 30 + 20 + 'px';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
document.querySelector('.hearts').appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
document.addEventListener('click', (e) => {
createHeart(e.clientX, e.clientY);
});
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = -50;
createHeart(x, y);
}, 300);代码解析：
- 动态元素创建：使用
document.createElement生成爱心元素 - 随机效果：通过
Math.random()实现爱心大小和下落速度的随机变化 - 事件监听：添加点击事件，实现点击位置生成爱心
- 定时器：使用
setInterval实现自动爱心雨效果
如何运行你的520爱心页面
520.html 完整源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
<title>W3Cschool编程狮 • 520爱心告白</title>
<meta name="description" content="编程狮(W3Cschool.cn)提供的浪漫520页面，包含动态爱心雨效果和诗意告白">
<style>
body {
margin: 0;
height: 100vh;
background: #ffe6f2;
overflow: hidden;
position: relative;
font-family: 'Noto Sans SC', 'Source Han Sans', sans-serif;
}
/* 主内容容器样式
居中定位 + 文字居中 */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ff3366;
}
.heart {
font-size: 100px;
animation: pulse 1.2s infinite;
text-shadow: 0 0 20px rgba(255,51,102,0.5);
}
.message {
font-size: 2em;
margin: 20px 0;
line-height: 1.6;
}
.hearts {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
}
/* 心跳动画
缩放比例 1 -> 1.1 -> 1 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.heart-fall {
position: absolute;
animation: fall linear forwards;
opacity: 0.7;
}
/* 爱心下落动画
带360度旋转效果 */
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="hearts"></div>
<div class="container">
<div class="heart">️</div>
<div class="message">
<p>在数不尽的星辰中</p>
<p>你是我唯一追寻的光</p>
<p>520 • 爱你每一天</p>
</div>
</div>
<footer style="
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #ff6680;
font-size: 14px;
">
Powered by 编程狮 • W3Cschool学习平台
<div>w3cschool.cn</div>
</footer>
<script>
// 创建单个爱心元素
// 参数说明：
// x - 爱心初始横坐标
// y - 爱心初始纵坐标
function createHeart(x, y) {
const heart = document.createElement('div');
heart.innerHTML = '️';
heart.className = 'heart-fall';
heart.style.left = x + 'px';
heart.style.top = y + 'px';
heart.style.fontSize = Math.random() * 30 + 20 + 'px';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
document.querySelector('.hearts').appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
// 点击事件监听：在点击位置生成爱心
document.addEventListener('click', (e) => {
createHeart(e.clientX, e.clientY);
});
// 自动生成爱心雨
// 自动爱心雨定时器（每300ms生成一个）
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = -50;
createHeart(x, y);
}, 300);
</script>
</body>
<!-- 技术支持：W3Cschool前端团队 -->
</html>- 将上述完整代码复制到文本编辑器（如记事本、HTML 在线编译器、Trae、VS Code等）
- 保存为
.html文件（例如：520.html） - 用浏览器打开该文件即可查看效果
拓展学习建议
- 尝试修改背景颜色和文字内容，创建属于你自己的个性化页面
- 学习更多CSS效果动画，为页面添加更多交互元素
- 探索JavaScript高级功能，实现更复杂的交互效果
感谢各位同学跟着编程狮（W3Cschool.cn）一起学习前端开发知识。希望这个520爱心页面不仅能够帮助你表达爱意，也能成为你编程学习道路上的一个美好回忆！
，双击运行。
