<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>给最爱的你 - 23岁生日快乐</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: linear-gradient(135deg, #ffcce6 0%, #c2e9fb 50%, #ffdbed 100%);
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: #7a2b58;
padding: 15px;
}
.container {
width: 95%;
max-width: 800px;
background: rgba(255, 255, 255, 0.92);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(214, 48, 49, 0.15);
padding: 2rem 1.5rem;
text-align: center;
z-index: 10;
position: relative;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.5);
animation: fadeIn 1.5s ease-out;
}
h1 {
color: #d63031;
font-size: 2.8rem;
margin: 1.3rem 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
animation: pulse 2s infinite alternate;
}
.age-badge {
background: linear-gradient(to right, #ff6b6b, #ff8e8e);
color: white;
display: inline-block;
padding: 0.6rem 1.8rem;
border-radius: 30px;
font-size: 1.7rem;
margin: 0.8rem auto;
transform: rotate(-3deg);
box-shadow: 0 3px 8px rgba(214, 48, 49, 0.2);
}
.message {
font-size: 1.15rem;
line-height: 1.8;
margin: 1.6rem 0;
text-align: left;
padding: 0 0.5rem;
}
.message p {
margin: 1.2rem 0;
position: relative;
padding-left: 1.8rem;
}
.message p:before {
content: "❤";
position: absolute;
left: 0.2rem;
top: 0.2rem;
color: #ff4757;
font-size: 1.2rem;
}
.heart-btn {
background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
color: white;
border: none;
padding: 1rem 2.8rem;
font-size: 1.4rem;
border-radius: 50px;
cursor: pointer;
margin: 2.2rem 0 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(214, 48, 49, 0.25);
-webkit-tap-highlight-color: transparent;
font-weight: 600;
display: inline-block;
min-width: 240px;
}
.heart-btn:hover, .heart-btn:active {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(214, 48, 49, 0.35);
}
.signature {
text-align: right;
font-family: 'Ma Shan Zheng', 'KaiTi', cursive;
font-size: 1.7rem;
color: #d63031;
margin-top: 2rem;
padding-right: 10px;
}
/* 飘落爱心 - 移动端优化 */
.heart {
position: absolute;
font-size: 1.8rem;
top: -50px;
animation: fall linear infinite;
z-index: 0;
pointer-events: none;
user-select: none;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
@keyframes fall {
to {
transform: translateY(105vh) rotate(360deg);
opacity: 0;
}
}
/* 移动端优化（max-width: 768px） */
@media (max-width: 768px) {
.container {
padding: 1.8rem 1.2rem;
width: 98%;
}
h1 {
font-size: 2.4rem;
margin: 1.2rem 0;
}
.age-badge {
font-size: 1.5rem;
padding: 0.5rem 1.4rem;
}
.message {
font-size: 1.05rem;
margin: 1.4rem 0;
line-height: 1.75;
}
.message p {
margin: 1rem 0;
padding-left: 1.5rem;
}
.heart-btn {
padding: 1.1rem 2.4rem;
font-size: 1.25rem;
margin: 1.8rem 0 1.3rem;
min-width: 220px;
}
.signature {
font-size: 1.5rem;
margin-top: 1.8rem;
}
}
/* 小屏幕手机优化（max-width: 480px） */
@media (max-width: 480px) {
body {
padding: 10px;
}
.container {
padding: 1.5rem 1rem;
border-radius: 16px;
}
h1 {
font-size: 2rem;
margin: 0.8rem 0 1rem;
}
.age-badge {
font-size: 1.25rem;
padding: 0.4rem 1.2rem;
}
.message {
font-size: 1rem;
margin: 1.2rem 0;
line-height: 1.7;
padding: 0;
}
.message p:before {
top: 0.1rem;
}
.heart-btn {
font-size: 1.15rem;
padding: 1rem 2.2rem;
border-radius: 40px;
min-width: 200px;
margin: 1.6rem 0 1.2rem;
}
.signature {
font-size: 1.35rem;
margin-top: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🎂 亲爱的姗姗 🎂</h1>
<div class="age-badge">23 岁 闪 耀 诞 辰</div>
<div class="message">
<p>在夏日的清风中，迎来了你最特别的23岁生日，感谢你让我的世界充满色彩，每个平凡的日子因你变得璀璨，愿新的一岁里，所有期许如期绽放，所有梦想落地生花。</p>
<p>与你相伴的每一天都是如此美好，愿我们的故事如同这生日的烛光，温暖而绵长。</p>
<p>在你最重要的日子送上我最真挚的祝福：健康、快乐、幸福常伴你左右。</p>
</div>
<button class="heart-btn" onclick="createHearts()">❤ 点击送出我的爱</button>
<div class="signature">
永远爱你的<br>
志远<br>
2025年7月15日
</div>
</div>
<script>
// 自动创建飘落爱心（优化移动端性能）
function createFallingHearts() {
const isMobile = window.innerWidth <= 768;
const heartCount = isMobile ? 20 : 30;
const container = document.body;
for (let i = 0; i < heartCount; i++) {
setTimeout(() => {
const heart = document.createElement('div');
heart.innerHTML = '❤';
heart.classList.add('heart');
heart.style.left = Math.random() * 100 + 'vw';
heart.style.fontSize = (Math.random() * (isMobile ? 8 : 10) + 20) + 'px';
heart.style.animationDuration = (Math.random() * (isMobile ? 4 : 5) + (isMobile ? 6 : 8)) + 's';
heart.style.opacity = Math.random() * 0.5 + 0.3;
container.appendChild(heart);
// 优化移动端性能
setTimeout(() => heart.remove(), 10000);
}, i * 300);
}
}
// 点击创建爱心特效（移动端优化）
function createHearts() {
const isMobile = window.innerWidth <= 768;
const heartCount = isMobile ? 10 : 15;
for(let i=0; i < heartCount; i++) {
const heart = document.createElement('div');
heart.innerHTML = '❤';
heart.style.left = Math.random() * 80 + 10 + '%';
heart.style.fontSize = (Math.random() * (isMobile ? 12 : 15) + 25) + 'px';
heart.style.animationDuration = Math.random() * 2 + 2 + 's';
heart.style.position = 'fixed';
heart.style.top = isMobile ? '60%' : '80%';
heart.className = 'heart';
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
// 按钮动画反馈
const btn = document.querySelector('.heart-btn');
btn.style.transform = 'scale(0.95)';
setTimeout(() => { btn.style.transform = ''; }, 300);
}
// 移动端触摸事件支持
document.querySelector('.heart-btn').addEventListener('touchstart', function(e) {
this.classList.add('active');
});
document.querySelector('.heart-btn').addEventListener('touchend', function(e) {
this.classList.remove('active');
createHearts();
});
// 启动效果
window.addEventListener('DOMContentLoaded', function() {
createFallingHearts();
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html