乖鱼宝的第1346日夸夸
:root {
--star-pink: #FFB6C1;
--golden-yellow: #FFD700;
}
body {
margin: 0;
background: linear-gradient(180deg, #2c1842 0%, #060514 100%);
font-family: 'Ma Shan Zheng', cursive;
color: #fff;
line-height: 1.8;
min-height: 100vh;
}
/* 新增星星容器 */
.stars-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* 星星动画 */
.star {
position: absolute;
width: 24px;
height: 24px;
animation: starFall 1.5s ease-out forwards;
opacity: 0;
}
@keyframes starFall {
0% {
opacity: 1;
transform: translateY(-100vh) rotate(0deg) scale(0.8);
}
100% {
opacity: 0;
transform: translateY(100vh) rotate(720deg) scale(1.2);
}
}
.love-letter {
position: relative;
max-width: 600px;
margin: 50px auto;
padding: 40px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
border: 2px solid var(--star-pink);
z-index: 1;
}
.highlight {
color: var(--golden-yellow);
font-size: 1.2em;
}
.star-button {
display: block;
width: 200px;
margin: 30px auto;
padding: 15px;
background: var(--star-pink);
border: none;
border-radius: 30px;
font-size: 1.2em;
color: white;
cursor: pointer;
transition: transform 0.3s;
}
.star-button:hover {
transform: scale(1.05);
box-shadow: 0 0 20px var(--star-pink);
}
/* 固定日期位置 */
.footer-date {
position: fixed;
right: 20px;
bottom: 20px;
color: var(--star-pink);
font-size: 0.9em;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<div class="love-letter">
<h1 style="text-align:center; color:var(--star-pink);">
✨ 致最可爱的你 ✨
</h1>
<p>亲爱的乖鱼宝：</p>
<p>今天是我们相遇的第<span class="highlight">1346</span>天，想认真告诉你：</p>
<ul>
<li>🌸 你的笑容是我的每日阳光</li>
<li>🎵 说话声音像春天的风铃一样好听</li>
<li>🧠 聪明到连数学题都会向你低头</li>
<li>💖 温柔的样子让所有人都想靠近</li>
</ul>
<p style="text-align:center; margin:30px 0;">
<span style="font-size:1.2em;">每天都比昨天</span><br>
<span style="color:var(--star-pink); font-size:1.5em;">更 喜 欢 你</span>
</p>
<button class="star-button" onclick="launchStars()">
❤️ 点击接收今日份喜欢
</button>
<div class="footer-date">认证日期：2025-03-07</div>
</div>
<script>
// 五角星SVG代码
const starSVG = `
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12 0l3.09 6.26L22 7.27l-5 4.87 1.18 6.88L12 16l-6.18 3.02L7 12.14 2 7.27l6.91-1.01L12 0z"/>
</svg>
`;
function launchStars() {
const container = document.querySelector('.stars-container');
const colors = ['#FFB6C1', '#FFD700', '#FFA07A', '#87CEFA'];
// 每次生成21颗星星（魔法数字）
for(let i=0; i<21; i++) {
const star = document.createElement('div');
star.className = 'star';
star.innerHTML = starSVG;
// 随机参数
const startX = Math.random() * 100;
const delay = Math.random() * 0.5;
const color = colors[Math.floor(Math.random()*colors.length)];
star.style.cssText = `
left: ${startX}%;
color: ${color};
animation-delay: ${delay}s;
filter: drop-shadow(0 0 5px ${color});
`;
container.appendChild(star);
// 3秒后移除元素
setTimeout(() => star.remove(), 1500);
}
}
</script>
