程序员唯美表白-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148402693

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>程序员唯美表白</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
font-family: 'Arial', sans-serif;
color: #fff;
}

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

#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

h1 {
font-size: 3em;
margin-bottom: 20px;
text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
opacity: 0;
transform: translateY(50px);
transition: all 1s ease;
}

p {
font-size: 1.5em;
max-width: 800px;
line-height: 1.6;
opacity: 0;
transform: translateY(50px);
transition: all 1s ease 0.5s;
}

.heart {
color: #ff3366;
font-size: 2em;
display: inline-block;
animation: pulse 1.5s infinite;
}

.code {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 20px 0;
opacity: 0;
transform: translateY(50px);
transition: all 1s ease 1s;
}

.button {
margin-top: 30px;
padding: 15px 30px;
background: linear-gradient(45deg, #ff3366, #ff9933);
border: none;
border-radius: 50px;
color: white;
font-size: 1.2em;
cursor: pointer;
opacity: 0;
transform: translateY(50px);
transition: all 1s ease 1.5s;
box-shadow: 0 0 15px rgba(255, 51, 102, 0.7);
}

.button:hover {
transform: scale(1.05) translateY(50px);
box-shadow: 0 0 25px rgba(255, 51, 102, 0.9);
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}

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

.typing {
border-right: 2px solid #fff;
animation: blink 0.7s infinite;
}

@keyframes blink {
0%, 100% { border-color: transparent; }
50% { border-color: #fff; }
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<div id="content">
<h1>亲爱的<span class="heart">❤</span>，我想对你说...</h1>

<div class="code">
<pre>while (alive) {
if (meetYou) {
loveYou();
missYou();
}
}</pre>
</div>

<p>在代码的世界里，你是我最完美的算法，我的心为你而编译，我的爱为你而运行。</p>

<button class="button" id="acceptBtn">接受我的爱</button>
</div>

<script>
$(document).ready(function() {
// 显示动画
setTimeout(function() {
$('h1').addClass('visible');
}, 500);

setTimeout(function() {
$('p').addClass('visible');
$('.code').addClass('visible');
}, 1500);

setTimeout(function() {
$('.button').addClass('visible');
}, 2500);

// 打字机效果
function typeWriter(element, text, speed) {
let i = 0;
element.text('');
element.addClass('typing');

function typing() {
if (i < text.length) {
element.append(text.charAt(i));
i++;
setTimeout(typing, speed);
} else {
element.removeClass('typing');
}
}

typing();
}

// 点击按钮效果
$('#acceptBtn').click(function() {
$(this).text('❤ 我也爱你 ❤');
$('.heart').css('color', '#ff0000');

// 创建爱心爆炸效果
for (let i = 0; i < 50; i++) {
createHeart();
}
});

// 背景动画
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

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

window.addEventListener('resize', function() {
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(function(star) {
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fill();
});

moveStars();
}

function moveStars() {
stars.forEach(function(star) {
star.x += star.vx / 100;
star.y += star.vy / 100;

if (star.x < 0 || star.x > canvas.width) {
star.vx = -star.vx;
}

if (star.y < 0 || star.y > canvas.height) {
star.vy = -star.vy;
}
});
}

setInterval(drawStars, 30);

// 爱心效果
function createHeart() {
const heart = $('<div class="heart">❤</div>').css({
position: 'absolute',
left: Math.random() * window.innerWidth,
top: Math.random() * window.innerHeight,
fontSize: (Math.random() * 20 + 10) + 'px',
opacity: 0,
transform: 'scale(0)'
}).appendTo('body');

heart.animate({
opacity: 1,
top: '-=50',
transform: 'scale(1.5)'
}, 1000, function() {
heart.animate({
opacity: 0
}, 1000, function() {
heart.remove();
});
});
}

// 随机生成爱心
setInterval(function() {
if (Math.random() > 0.7) {
createHeart();
}
}, 300);

});
</script>
</body>
</html>