送给sly的七夕礼物
请把下面的东西复制成.txt文件再转成.html文件即可观看qwq
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕表白 - 爱的告白</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #f5c3e6, #b19cd9, #e6e6fa);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
color: #4b0082;
}
.container {
position: relative;
width: 100%;
max-width: 800px;
text-align: center;
padding: 30px;
z-index: 10;
}
.header {
margin-bottom: 30px;
}
h1 {
font-size: 3rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
color: #8a2be2;
animation: pulse 2s infinite;
}
.subtitle {
font-size: 1.5rem;
margin-bottom: 20px;
color: #9370db;
}
.love-card {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.love-card::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
background: #ffb6c1;
border-radius: 50%;
z-index: -1;
opacity: 0.3;
}
.love-card::after {
content: "";
position: absolute;
bottom: -50px;
left: -50px;
width: 150px;
height: 150px;
background: #b19cd9;
border-radius: 50%;
z-index: -1;
opacity: 0.3;
}
.message {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 20px;
text-align: left;
}
.signature {
text-align: right;
font-style: italic;
font-weight: bold;
color: #8a2be2;
}
.hearts-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.heart {
position: absolute;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6b6b'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center/contain;
opacity: 0.7;
animation: fall linear forwards;
}
.btn-confess {
background: linear-gradient(45deg, #da70d6, #9370db);
color: white;
border: none;
padding: 15px 40px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-confess:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.hidden-message {
display: none;
margin-top: 30px;
font-size: 1.5rem;
color: #ff1493;
font-weight: bold;
animation: fadeIn 2s;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes fall {
from { transform: translateY(-100px) rotate(0deg); }
to { transform: translateY(100vh) rotate(360deg); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 768px) {
h1 { font-size: 2rem; }
.subtitle { font-size: 1.2rem; }
.message { font-size: 1rem; }
}
</style>
</head>
<body>
<div class="hearts-container" id="hearts-container"></div>
<div class="container">
<div class="header">
<h1>❤️ 七夕快乐 ❤️</h1>
<p class="subtitle">在这个特别的日子里，我想对你说...</p>
</div>
<div class="love-card">
<p class="message">
亲爱的，遇见你是我一生中最美好的意外。你的笑容如春风般温暖，你的眼神如星辰般璀璨。
<br><br>
在这个浪漫的七夕节，我想告诉你：我爱你，不仅仅因为你是谁，更因为与你在一起时，我找到了最真实的自己。
<br><br>
愿我们的爱情，如同牛郎织女般坚定，跨越一切距离，永远相守。
</p>
<p class="signature">—— 永远爱你的我</p>
</div>
<button class="btn-confess" id="confess-btn">我也爱你</button>
<div class="hidden-message" id="hidden-message">
愿我们的爱情长存，七夕快乐！❤️
</div>
</div>
<script>
// 创建飘落的心形
function createHearts() {
const heartsContainer = document.getElementById('hearts-container');
const numberOfHearts = 30;
for (let i = 0; i < numberOfHearts; i++) {
const heart = document.createElement('div');
heart.classList.add('heart');
// 随机位置和动画延迟
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animationDuration = (Math.random() * 5 + 5) + 's';
heart.style.animationDelay = Math.random() * 5 + 's';
heartsContainer.appendChild(heart);
}
}
// 按钮点击事件
document.getElementById('confess-btn').addEventListener('click', function() {
const hiddenMessage = document.getElementById('hidden-message');
hiddenMessage.style.display = 'block';
// 改变按钮文本
this.textContent = '爱你永远';
this.style.background = 'linear-gradient(45deg, #ff69b4, #ff1493)';
// 创建更多爱心
createMoreHearts();
});
// 创建更多爱心
function createMoreHearts() {
const heartsContainer = document.getElementById('hearts-container');
const extraHearts = 20;
for (let i = 0; i < extraHearts; i++) {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animationDuration = (Math.random() * 3 + 3) + 's';
heart.style.animationDelay = Math.random() * 2 + 's';
heartsContainer.appendChild(heart);
}
}
// 初始化
window.onload = function() {
createHearts();
};
</script>
</body>
</html>
浙公网安备 33010602011771号