源码!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title3.14白色情人节 · 只对你心动/title!-- 引入图标库 --link relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.cssstyle* {margin: 0;padding: 0;box-sizing: border-box;}/* 页面基础样式爱的渐变色调 */body {min-height: 100vh;background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);font-family: Microsoft YaHei, sans-serif;overflow: hidden;display: flex;justify-content: center;align-items: center;flex-direction: column;position: relative;}/* 爱心飘落特效容器 */.hearts {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;}/* 主文案样式 */.love-title {font-size: 50px;color: #ff4d6d;text-shadow: 0 0 10px rgba(255,77,109,0.5), 0 0 20px rgba(255,77,109,0.3);margin-bottom: 20px;animation: pulse 2s infinite alternate;z-index: 10;text-align: center;}/* 副标题暖心文案 */.love-subtitle {font-size: 24px;color: #c51162;margin-bottom: 30px;z-index: 10;text-align: center;line-height: 1.6;}/* 亲昵文案 */.love-text {font-size: 20px;color: #d81b60;z-index: 10;text-align: center;max-width: 80%;animation: fadeIn 3s ease;}/* 心动按钮 */.love-btn {margin-top: 40px;padding: 15px 40px;background: #ff4d6d;color: white;border: none;border-radius: 50px;font-size: 22px;cursor: pointer;box-shadow: 0 8px 20px rgba(255,77,109,0.4);transition: all 0.3s ease;z-index: 10;}.love-btn:hover {transform: scale(1.1);background: #ff2a51;box-shadow: 0 12px 25px rgba(255,77,109,0.6);}/* 动画心跳缩放 */keyframes pulse {0% { transform: scale(1); }100% { transform: scale(1.08); }}/* 动画淡入 */keyframes fadeIn {0% { opacity: 0; transform: translateY(20px); }100% { opacity: 1; transform: translateY(0); }}/style/headbody!-- 爱心飘落特效 --div classhearts idhearts/div!-- 暖心文案 --h1 classlove-title 3.14 白色情人节 /h1p classlove-subtitle爱意不止37.2℃是满心满眼都是你的温度/pp classlove-text愿你被温柔以待被爱意包围br三餐四季岁岁年年永远有人把你捧在手心里br今天全世界的温柔与偏爱都只属于你 ✨/p!-- 心动按钮 --button classlove-btn onclicksendLove()i classfa-solid fa-heart/i 点击接收满满爱意/buttonscript// 爱心飘落特效function createHearts() {const heartsContainer document.getElementById(hearts);const heartCount 50; // 爱心数量for (let i 0; i heartCount; i) {const heart document.createElement(div);heart.innerHTML ❤️;heart.style.position absolute;heart.style.fontSize Math.random() * 20 10 px;heart.style.left Math.random() * 100 %;heart.style.top -10px;heart.style.animation fall ${Math.random() * 3 2}s linear infinite;heart.style.animationDelay Math.random() * 5 s;heartsContainer.appendChild(heart);}}// 定义爱心下落动画const style document.createElement(style);style.innerHTML keyframes fall {0% { transform: translateY(0) rotate(0deg); opacity: 1; }100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }};document.head.appendChild(style);// 按钮点击特效function sendLove() {alert( 爱意已送达愿你3.14白色情人节快乐永远被爱包围);}// 加载完成后生成爱心window.onload createHearts;/script/body/html