七夕情人节浪漫特效-优快云博客

<!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>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #0b0b2a, #1a1a4a, #2d2d6a);
font-family: 'Arial', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

#canvas {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}

.container {
position: relative;
z-index: 2;
text-align: center;
color: white;
padding: 20px;
max-width: 800px;
}

h1 {
font-size: 3em;
margin-bottom: 20px;
text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4;
animation: glow 2s infinite alternate;
}

p {
font-size: 1.5em;
line-height: 1.6;
margin-bottom: 30px;
text-shadow: 0 0 5px #ff69b4;
}

.heart {
position: absolute;
pointer-events: none;
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}

@keyframes glow {
from {
text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4;
}
to {
text-shadow: 0 0 15px #ff69b4, 0 0 30px #ff69b4, 0 0 40px #ff69b4;
}
}

.button {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(45deg, #ff69b4, #ff1493);
color: white;
border: none;
border-radius: 50px;
font-size: 1.2em;
cursor: pointer;
text-decoration: none;
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
transition: all 0.3s ease;
margin-top: 20px;
}

.button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.6);
}

.couple {
width: 300px;
height: 300px;
margin: 0 auto 30px;
position: relative;
}

.boy, .girl {
width: 100px;
height: 200px;
position: absolute;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
transition: all 0.5s ease;
}

.boy {
left: 50px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><circle cx="50" cy="40" r="30" fill="%2366ccff"/><rect x="30" y="70" width="40" height="80" fill="%2366ccff"/><rect x="20" y="150" width="20" height="30" fill="%2366ccff"/><rect x="60" y="150" width="20" height="30" fill="%2366ccff"/><rect x="25" y="70" width="10" height="40" fill="%2366ccff"/><rect x="65" y="70" width="10" height="40" fill="%2366ccff"/></svg>');
}

.girl {
right: 50px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><circle cx="50" cy="40" r="30" fill="%23ff99cc"/><path d="M30,70 L70,70 L60,150 L40,150 Z" fill="%23ff99cc"/><rect x="20" y="150" width="20" height="30" fill="%23ff99cc"/><rect x="60" y="150" width="20" height="30" fill="%23ff99cc"/><rect x="25" y="70" width="10" height="40" fill="%23ff99cc"/><rect x="65" y="70" width="10" height="40" fill="%23ff99cc"/></svg>');
}

.message {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}

.visible {
opacity: 1;
transform: translateY(0);
}

.credit {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 12px;
color: rgba(255,255,255,0.5);
z-index: 3;
}

.credit a {
color: rgba(255,255,255,0.7);
text-decoration: none;
}

.credit a:hover {
color: white;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<div class="container">
<div class="couple">
<div class="boy"></div>
<div class="girl"></div>
</div>

<h1>七夕情人节快乐</h1>

<div class="message" id="message1">
<p>在这浪漫的七夕之夜，</p>
</div>

<div class="message" id="message2">
<p>愿我们的爱情如银河般永恒，</p>
</div>

<div class="message" id="message3">
<p>如星辰般璀璨。</p>
</div>


</div>



<script>
// 星空背景
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 星星数组
const stars = [];
const starCount = 200;

// 创建星星
for (let i = 0; i < starCount; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 1.5,
vx: Math.floor(Math.random() * 50) - 25,
vy: Math.floor(Math.random() * 50) - 25
});
}

// 绘制星星
function drawStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'white';
stars.forEach(star => {
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fill();

// 星星闪烁效果
if (Math.random() > 0.95) {
star.radius = star.radius * 1.5;
if (star.radius > 2) star.radius = Math.random() * 1.5;
}
});

drawMilkyWay();
requestAnimationFrame(drawStars);
}

// 绘制银河
function drawMilkyWay() {
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'rgba(255, 105, 180, 0.1)');
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.2)');
gradient.addColorStop(1, 'rgba(100, 149, 237, 0.1)');

ctx.fillStyle = gradient;
ctx.fillRect(0, canvas.height / 2 - 50, canvas.width, 100);
}

// 爱心粒子
const hearts = [];
const heartColors = ['#ff69b4', '#ff1493', '#ff99cc', '#ff66b2', '#ff3385'];

function createHeart() {
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = '❤';
heart.style.color = heartColors[Math.floor(Math.random() * heartColors.length)];
heart.style.fontSize = (Math.random() * 20 + 10) + 'px';
heart.style.left = Math.random() * window.innerWidth + 'px';
heart.style.top = Math.random() * window.innerHeight + 'px';
heart.style.opacity = Math.random() * 0.5 + 0.5;
heart.style.animationDuration = (Math.random() * 3 + 3) + 's';
heart.style.animationDelay = Math.random() + 's';
document.body.appendChild(heart);

hearts.push({
element: heart,
x: parseFloat(heart.style.left),
y: parseFloat(heart.style.top),
speedX: Math.random() * 2 - 1,
speedY: Math.random() * 2 - 1.5
});

// 移除爱心
setTimeout(() => {
heart.remove();
hearts.splice(hearts.indexOf(heart), 1);
}, 10000);
}

// 更新爱心位置
function updateHearts() {
hearts.forEach(heart => {
heart.x += heart.speedX;
heart.y += heart.speedY;

heart.element.style.left = heart.x + 'px';
heart.element.style.top = heart.y + 'px';

// 边界检查
if (heart.x < -50 || heart.x > window.innerWidth + 50 ||
heart.y < -50 || heart.y > window.innerHeight + 50) {
heart.element.remove();
hearts.splice(hearts.indexOf(heart), 1);
}
});

requestAnimationFrame(updateHearts);
}

// 初始化动画
window.addEventListener('load', () => {
drawStars();
updateHearts();

// 定期创建爱心
setInterval(createHeart, 300);

// 显示消息
setTimeout(() => {
document.getElementById('message1').classList.add('visible');
}, 1000);

setTimeout(() => {
document.getElementById('message2').classList.add('visible');
}, 2000);

setTimeout(() => {
document.getElementById('message3').classList.add('visible');
}, 3000);

// 情侣动画
const boy = document.querySelector('.boy');
const girl = document.querySelector('.girl');

setInterval(() => {
boy.style.transform = 'translateX(-5px)';
girl.style.transform = 'translateX(5px)';

setTimeout(() => {
boy.style.transform = 'translateX(0)';
girl.style.transform = 'translateX(0)';
}, 500);
}, 2000);
});

// 窗口大小调整
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 重新放置星星
stars.forEach(star => {
star.x = Math.random() * canvas.width;
star.y = Math.random() * canvas.height;
});
});
</script>
</body>
</html>