!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title白色情人节 · 予你温柔与偏爱/titlestyle* {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/headbody!-- 动态飘雪/花瓣元素JS生成 --div idsnowContainer/div!-- 爱心元素JS生成 --div idheartContainer/div!-- 核心内容 --div classcontainerh1 classtitle白色情人节快乐 ❤️/h1p classdate2026.03.14 · 予你温柔不止今天/pdiv classmessage三月的风温柔了整个春天br白色的浪漫是心意的回响br感谢相遇感谢陪伴br所有的偏爱与温柔都想给你br愿日子清透世事温柔br愿我们岁岁年年满心欢喜/divbutton classbtn onclickshowLove()点击收下我的心意/button/divdiv classfooter白色情人节 · 爱与温柔皆为你/divscript// 生成飘雪效果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
