白色情人节
<!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;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
/* 页面基础样式 */
body {
background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* 飘雪/花瓣动画（模拟白色情人节的浪漫元素） */
.snowflake {
position: absolute;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
pointer-events: none;
animation: snowfall linear infinite;
}
/* 爱心装饰动画 */
.heart {
position: absolute;
color: #ff8fa3;
font-size: 16px;
opacity: 0;
animation: heartFloat 6s ease-in-out infinite;
}
@keyframes heartFloat {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
20% {
opacity: 0.8;
}
80% {
opacity: 0.8;
}
100% {
transform: translateY(-20px) rotate(360deg);
opacity: 0;
}
}
@keyframes snowfall {
0% {
transform: translateY(-10px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
/* 核心内容容器 */
.container {
position: relative;
z-index: 10;
max-width: 800px;
margin: 0 auto;
padding: 80px 20px;
text-align: center;
}
/* 标题样式 */
.title {
font-size: 42px;
color: #d94854;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(217, 72, 84, 0.2);
position: relative;
}
.title::after {
content: "";
display: block;
width: 120px;
height: 3px;
background: linear-gradient(to right, transparent, #d94854, transparent);
margin: 15px auto;
}
/* 日期提示 */
.date {
font-size: 18px;
color: #666;
margin-bottom: 40px;
font-weight: 300;
}
/* 暖心文案 */
.message {
font-size: 20px;
line-height: 1.8;
color: #333;
margin-bottom: 60px;
padding: 0 20px;
background: rgba(255, 255, 255, 0.6);
border-radius: 15px;
padding: 30px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 15px 40px;
background: linear-gradient(to right, #ff8fa3, #d94854);
color: white;
text-decoration: none;
border-radius: 50px;
font-size: 18px;
font-weight: 500;
box-shadow: 0 5px 15px rgba(217, 72, 84, 0.3);
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(217, 72, 84, 0.4);
}
/* 底部装饰 */
.footer {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 14px;
color: #999;
z-index: 10;
}
/* 响应式适配 */
@media (max-width: 768px) {
.title {
font-size: 32px;
}
.message {
font-size: 18px;
}
.container {
padding: 60px 15px;
}
}
</style>
</head>
<body>
<!-- 动态飘雪/花瓣元素（JS生成） -->
<div id="snowContainer"></div>
<!-- 爱心元素（JS生成） -->
<div id="heartContainer"></div>
<!-- 核心内容 -->
<div class="container">
<h1 class="title">白色情人节快乐 ❤️</h1>
<p class="date">2026.03.14 · 予你温柔，不止今天</p>
<div class="message">
三月的风，温柔了整个春天<br>
白色的浪漫，是心意的回响<br>
感谢相遇，感谢陪伴<br>
所有的偏爱与温柔，都想给你<br>
愿日子清透，世事温柔<br>
愿我们，岁岁年年，满心欢喜
</div>
<button class="btn" onclick="showLove()">点击收下我的心意</button>
</div>
<div class="footer">
白色情人节 · 爱与温柔皆为你
</div>
<script>
// 生成飘雪效果
function createSnowflakes() {
const snowContainer = document.getElementById('snowContainer');
const numberOfSnowflakes = 50;
for (let i = 0; i < numberOfSnowflakes; i++) {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// 随机大小、位置、动画时长
const size = Math.random() * 6 + 2;
snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
snowflake.style.left = `${Math.random() * 100}vw`;
snowflake.style.animationDuration = `${Math.random() * 10 + 10}s`;
snowflake.style.animationDelay = `${Math.random() * 5}s`;
snowContainer.appendChild(snowflake);
}
}
// 生成爱心漂浮效果
function createHearts() {
const heartContainer = document.getElementById('heartContainer');
const numberOfHearts = 20;
const hearts = ['❤️', '💖 ', '💘 ', '💝 '];
for (let i = 0; i < numberOfHearts; i++) {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerText = hearts[Math.floor(Math.random() * hearts.length)];
// 随机位置、动画时长
heart.style.left = `${Math.random() * 100}vw`;
heart.style.animationDuration = `${Math.random() * 10 + 10}s`;
heart.style.animationDelay = `${Math.random() * 10}s`;
heartContainer.appendChild(heart);
}
}
// 点击按钮的暖心提示
function showLove() {
alert('💓 我的心意：\n往后余生，风雪是你，平淡是你，温柔也是你\n白色情人节快乐，我最爱的人～');
}
// 页面加载完成后生成动画
window.onload = function() {
createSnowflakes();
createHearts();
};
</script>
</body>
</html>