白色情人节，予你无尽的爱
源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3.14白色情人节 · 只对你心动</title>
<!-- 引入图标库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
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>
</head>
<body>
<!-- 爱心飘落特效 -->
<div class="hearts" id="hearts"></div>
<!-- 暖心文案 -->
<h1 class="love-title">💖 3.14 白色情人节 💖 </h1>
<p class="love-subtitle">爱意不止37.2℃，是满心满眼都是你的温度</p>
<p class="love-text">
愿你被温柔以待，被爱意包围<br>
三餐四季，岁岁年年，永远有人把你捧在手心里<br>
今天，全世界的温柔与偏爱，都只属于你 ✨
</p>
<!-- 心动按钮 -->
<button class="love-btn" onclick="sendLove()">
<i class="fa-solid fa-heart"></i> 点击接收满满爱意
</button>
<script>
// 爱心飘落特效
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>