这份源码将包含HTML结构、CSS样式和JavaScript交互，完整地呈现了一个浪漫、互动的情人节页面，它融合了当时流行的设计元素，如渐变色、动画效果、打字机效果和粒子动画。
（图片来源网络，侵删）
网页预览效果
- 整体风格：浪漫的粉色、紫色渐变背景，带有飘落的心形和星光粒子效果。
- 主要元素：
- 一个动态的标题,带有“打字机”效果。
- 一个互动的爱心,点击后会放大并产生“爱心爆炸”效果。
- 一个显示倒计时的区域,计算到下一个情人节的秒数。
- 一个可以生成情话的按钮。
- 一个可以一起“放烟花”的按钮，点击后在页面上随机位置生成绚丽的烟花动画。
完整源代码
您可以将以下所有代码复制到一个文本编辑器中,保存为 valentine.html 文件，然后用浏览器打开即可查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">情人节快乐 2025</title>
<style>
/* --- 全局样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* --- 粒子画布 --- */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
/* --- 主内容容器 --- */
.container {
text-align: center;
z-index: 10;
position: relative;
}
/* --- 标题样式 --- */
h1 {
font-size: 4em;
margin-bottom: 20px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
/* --- 打字机效果 --- */
.typewriter {
overflow: hidden;
border-right: .15em solid #fff;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #fff; }
}
/* --- 爱心按钮 --- */
.heart-button {
background-color: #ff4458;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2em;
border-radius: 50px;
cursor: pointer;
margin: 20px;
box-shadow: 0 4px 15px rgba(255, 68, 88, 0.4);
transition: all 0.3s ease;
}
.heart-button:hover {
background-color: #ff2d3f;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 68, 88, 0.6);
}
/* --- 倒计时样式 --- */
#countdown {
font-size: 1.5em;
margin: 20px 0;
font-weight: bold;
}
.countdown-item {
display: inline-block;
margin: 0 10px;
}
.countdown-number {
font-size: 2em;
display: block;
}
/* --- 情话区域 --- */
#love-message {
font-size: 1.3em;
margin: 20px auto;
max-width: 600px;
min-height: 50px;
line-height: 1.6;
font-style: italic;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
#love-message.show {
opacity: 1;
}
/* --- 烟花画布 --- */
#fireworks-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
h1 {
font-size: 2.5em;
}
.typewriter {
font-size: 1.5em;
}
#countdown {
font-size: 1.2em;
}
.countdown-number {
font-size: 1.5em;
}
}
</style>
</head>
<body>
<!-- 粒子背景画布 -->
<div id="particles-js"></div>
<!-- 烟花效果画布 -->
<canvas id="fireworks-canvas"></canvas>
<!-- 主内容 -->
<div class="container">
<h1>
<span class="typewriter">情人节快乐, My Love!</span>
</h1>
<button class="heart-button" id="heartBtn">点击我的心 ❤️</button>
<div id="countdown">
距离下一个情人节还有:
<span class="countdown-item">
<span class="countdown-number" id="days">0</span>天
</span>
<span class="countdown-item">
<span class="countdown-number" id="hours">0</span>时
</span>
<span class="countdown-item">
<span class="countdown-number" id="minutes">0</span>分
</span>
<span class="countdown-item">
<span class="countdown-number" id="seconds">0</span>秒
</span>
</div>
<button class="heart-button" id="messageBtn">给我一句情话</button>
<p id="love-message"></p>
<button class="heart-button" id="fireworksBtn">一起放烟花 🎆</button>
</div>
<!-- 引入 particles.js 库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// --- 1. 粒子背景效果 ---
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"push": {
"particles_nb": 4
}
}
},
"retina_detect": true
});
// --- 2. 爱心点击效果 ---
const heartBtn = document.getElementById('heartBtn');
heartBtn.addEventListener('click', function() {
this.style.transform = 'scale(1.5)';
this.innerHTML = '你收到了我的心! ❤️❤️❤️';
// 创建爆炸的小爱心
for (let i = 0; i < 10; i++) {
createHeartExplosion(this);
}
setTimeout(() => {
this.style.transform = 'scale(1)';
this.innerHTML = '点击我的心 ❤️';
}, 1000);
});
function createHeartExplosion(button) {
const heart = document.createElement('div');
heart.innerHTML = '❤️';
heart.style.position = 'absolute';
heart.style.fontSize = '20px';
heart.style.pointerEvents = 'none';
heart.style.left = button.offsetLeft + 'px';
heart.style.top = button.offsetTop + 'px';
document.body.appendChild(heart);
const angle = Math.random() * Math.PI * 2;
const velocity = 5 + Math.random() * 5;
const lifetime = 1000 + Math.random() * 1000;
let posX = 0;
let posY = 0;
let opacity = 1;
const animate = () => {
posX += Math.cos(angle) * velocity;
posY += Math.sin(angle) * velocity;
opacity -= 0.02;
heart.style.transform = `translate(${posX}px, ${posY}px)`;
heart.style.opacity = opacity;
if (opacity > 0) {
requestAnimationFrame(animate);
} else {
document.body.removeChild(heart);
}
};
animate();
}
// --- 3. 倒计时功能 ---
function updateCountdown() {
const now = new Date();
const currentYear = now.getFullYear();
let nextValentine = new Date(currentYear, 1, 14); // 月份从0开始，1代表二月
if (now > nextValentine) {
nextValentine = new Date(currentYear + 1, 1, 14);
}
const diff = nextValentine - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days;
document.getElementById('hours').textContent = hours;
document.getElementById('minutes').textContent = minutes;
document.getElementById('seconds').textContent = seconds;
}
setInterval(updateCountdown, 1000);
updateCountdown();
// --- 4. 情话生成器 ---
const loveMessages = [
"遇见你，是我这辈子最美好的意外。",
"世界这么大，还是只想和你在一起。",
"你是我所有情话的结尾，也是我余生的开始。",
"我的眼里心里，全都是你。",
"想和你一起，从心动到古稀。",
"你是我平淡生活里的星辰大海。",
"春风十里，不如你。",
"我想牵着你的手，从心动到古稀。",
"你是我所有故事的结尾，也是我所有未来的开头。",
"遇见你，花开了，世界也亮了。"
];
const messageBtn = document.getElementById('messageBtn');
const loveMessageEl = document.getElementById('love-message');
messageBtn.addEventListener('click', function() {
const randomMessage = loveMessages[Math.floor(Math.random() * loveMessages.length)];
loveMessageEl.textContent = randomMessage;
loveMessageEl.classList.add('show');
});
// --- 5. 烟花效果 ---
const fireworksCanvas = document.getElementById('fireworks-canvas');
const ctx = fireworksCanvas.getContext('2d');
fireworksCanvas.width = window.innerWidth;
fireworksCanvas.height = window.innerHeight;
const fireworks = [];
const particles = [];
class Firework {
constructor(x, y) {
this.x = x;
this.y = y;
this.targetY = y - (Math.random() * 50 + 100);
this.speed = 5;
this.acceleration = 1.05;
this.brightness = Math.random() * 50 + 50;
this.targetRadius = 1;
}
update() {
this.y -= this.speed;
this.speed *= this.acceleration;
if (this.speed <= 2) {
this.explode();
return true; // 标记为需要移除
}
return false;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.targetRadius, 0, Math.PI * 2);
ctx.fillStyle = `hsl(${Math.random() * 360}, 100%, ${this.brightness}%)`;
ctx.fill();
}
explode() {
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle(this.x, this.y));
}
}
}
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.velocity = {
x: (Math.random() - 0.5) * 10,
y: (Math.random() - 0.5) * 10
};
this.alpha = 1;
this.decay = Math.random() * 0.03 + 0.01;
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
}
update() {
this.velocity.x *= 0.99;
this.velocity.y *= 0.99;
this.velocity.y += 0.1; // 重力
this.x += this.velocity.x;
this.y += this.velocity.y;
this.alpha -= this.decay;
return this.alpha <= 0;
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
function animateFireworks() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
for (let i = fireworks.length - 1; i >= 0; i--) {
if (fireworks[i].update()) {
fireworks.splice(i, 1);
} else {
fireworks[i].draw();
}
}
for (let i = particles.length - 1; i >= 0; i--) {
if (particles[i].update()) {
particles.splice(i, 1);
} else {
particles[i].draw();
}
}
requestAnimationFrame(animateFireworks);
}
document.getElementById('fireworksBtn').addEventListener('click', function() {
const x = Math.random() * fireworksCanvas.width;
const y = fireworksCanvas.height;
fireworks.push(new Firework(x, y));
});
// 启动烟花动画循环
animateFireworks();
// 窗口大小改变时，调整画布大小
window.addEventListener('resize', () => {
fireworksCanvas.width = window.innerWidth;
fireworksCanvas.height = window.innerHeight;
});
</script>
</body>
</html>
代码结构解析
-
HTML (
<body>部分):- 定义了页面的基本结构,包括标题、按钮、倒计时显示区域和情话显示区域。
- 使用了两个
<canvas>元素，一个用于粒子背景 (particles-js)，另一个用于烟花效果 (fireworks-canvas)。 - 通过 CDN 引入了
particles.js库，这是一个非常流行的粒子效果库。
-
CSS (
<style>部分):- 全局样式: 设置了字体、背景色（使用了2025年流行的渐变色）、文字颜色等。
- 粒子画布: 将
#particles-js设为fixed定位，覆盖整个屏幕，并置于底层 (z-index: 1)。 - : 使用
flexbox布局，将所有内容垂直和水平居中。 - 打字机效果: 通过
@keyframes动画实现文字逐个显示的光标效果。 - 按钮样式: 设计了圆角、阴影和悬停效果，使其更具交互感。
- 响应式设计: 使用
@media查询，在移动设备上调整字体大小和布局，保证良好的浏览体验。
-
JavaScript (
<script>部分):
（图片来源网络，侵删）- 粒子背景: 调用
particlesJS函数，并传入配置对象，定义了粒子的数量、颜色、连线、鼠标交互等效果。 - 爱心点击效果:
- 监听按钮点击事件。
- 点击时,改变按钮的缩放和文字内容。
- 调用
createHeartExplosion函数，在按钮周围生成多个带有随机方向和速度的小爱心，并让它们飞散消失。
- 倒计时功能:
- 计算当前时间到下一个2月14日的毫秒差。
- 将毫秒差转换为天、时、分、秒。
- 使用
setInterval每秒更新一次倒计时显示。
- 情话生成器:
- 创建一个情话数组。
- 点击按钮时,从数组中随机选择一条情话并显示在页面上，同时通过
opacity过渡效果让文字平滑出现。
- 烟花效果:
Firework类: 代表一个烟花，它从底部随机位置发射，到达目标高度后“爆炸”。Particle类: 代表烟花爆炸后产生的粒子，粒子有随机的速度、颜色和透明度，并受重力影响下落。- 动画循环:
animateFireworks函数是整个烟花效果的核心，它在一个循环中不断清空画布（带有半透明黑色覆盖，实现拖尾效果），然后更新和绘制所有烟花和粒子。 - 触发: 点击“放烟花”按钮时，创建一个新的
Firework实例并添加到fireworks数组中，动画循环会自动处理它。
- 粒子背景: 调用
这份源码完整地实现了一个功能丰富、视觉效果出色的2025年风格情人节网页，希望能满足您的要求！
（图片来源网络，侵删）
