表白代码合集
八款浪漫表白代码合集
程序员表白的方式有多浪漫？这八款表白特效代码，总有一款能打动ta的心。
在这个数字时代，爱情表白方式也随之改变。过去我们写情书、亲自表达情感，而现在我们可以利用编程技术创造独特而有趣的方式来表达爱意。以下八款表白代码，每一款都能让她/他心动~
特效一：爱心跳动
💗 效果演示
我喜欢你，像心跳永不停息
<style>
.heart {
width: 100px;
height: 100px;
position: relative;
animation: heartbeat 1s ease-in-out infinite;
}
.heart::before, .heart::after {
content: "";
position: absolute;
width: 50px;
height: 80px;
background: #ff6b6b;
border-radius: 50px 50px 0 0;
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
</style>
<div class="heart"></div>特效二：打字机情书
⌨️ 效果演示
<script>
const text = "亲爱的，我喜欢你！";
const element = document.getElementById('typewriter');
let index = 0;
function type() {
if (index < text.length) {
element.innerHTML += text.charAt(index);
index++;
setTimeout(type, 200); // 打字速度
}
}
type();
</script>
<style>
.typewriter .cursor {
display: inline-block;
width: 2px;
height: 1.2em;
background: #c9a96e;
animation: blink 0.8s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
</style>特效三：鼠标跟随爱心
🖱️ 效果演示（移动鼠标）
移动鼠标看看~
<script>
document.addEventListener('mousemove', function(e) {
const heart = document.createElement('div');
heart.className = 'follow-heart';
heart.innerHTML = '💗';
heart.style.left = e.pageX + 'px';
heart.style.top = e.pageY + 'px';
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 1500);
});
</script>
<style>
.follow-heart {
position: fixed;
pointer-events: none;
animation: floatUp 1.5s ease-out forwards;
}
@keyframes floatUp {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-80px); }
}
</style>特效四：点击出现爱心
👆 效果演示（点击页面）
点击任意位置~
<script>
document.addEventListener('click', function(e) {
const heart = document.createElement('div');
heart.innerHTML = '💕';
heart.style.cssText = `
position: absolute;
left: ${e.pageX}px;
top: ${e.pageY}px;
font-size: 24px;
pointer-events: none;
animation: popHeart 1s ease-out forwards;
`;
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 1000);
});
</script>特效五：樱花飘落
🌸 效果演示
<script>
function createSakura() {
const sakura = document.createElement('div');
sakura.innerHTML = ['🌸', '🌺', '🌹'][Math.floor(Math.random() * 3)];
sakura.style.cssText = `
position: absolute;
left: ${Math.random() * 100}%;
font-size: ${20 + Math.random() * 15}px;
animation: fall ${3 + Math.random() * 2}s linear forwards;
`;
document.getElementById('container').appendChild(sakura);
setTimeout(() => sakura.remove(), 5000);
}
setInterval(createSakura, 300);
</script>特效六：浪漫星空
✨ 效果演示
<script>
// 创建星星
for (let i = 0; i < 50; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.cssText = `
left: ${Math.random() * 100}%;
top: ${Math.random() * 100}%;
animation-delay: ${Math.random() * 2}s;
`;
container.appendChild(star);
}
// 创建流星
function createShootingStar() {
const star = document.createElement('div');
star.className = 'shooting-star';
star.style.cssText = `
left: ${Math.random() * 50}%;
top: ${Math.random() * 30}%;
`;
container.appendChild(star);
setTimeout(() => star.remove(), 1500);
}
setInterval(createShootingStar, 2000);
</script>特效七：在一起时间计算
📅 效果演示
<script>
function updateTimer() {
const start = new Date('2022-01-01'); // 在一起的日子
const now = new Date();
const diff = now - start;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % day) / (1000 * 60 * 60));
const mins = Math.floor((diff % hour) / (1000 * 60));
const secs = Math.floor((diff % min) / 1000);
document.getElementById('timer').innerHTML =
`在一起 ${days} 天 ${hours} 时
${mins} 分 ${secs} 秒`;
}
setInterval(updateTimer, 1000);
</script>特效八：爱心粒子爆炸
💥 效果演示（点击按钮）
<script>
function explodeHearts(e) {
for (let i = 0; i < 12; i++) {
const heart = document.createElement('div');
heart.innerHTML = ['💗', '💕', '💖', '💗', '💓'][i % 5];
const angle = (i / 12) * 360;
const distance = 80 + Math.random() * 40;
heart.style.cssText = `
position: absolute;
left: 50%;
top: 50%;
font-size: 24px;
--tx: ${Math.cos(angle * Math.PI / 180) * distance}px;
--ty: ${Math.sin(angle * Math.PI / 180) * distance}px;
animation: explode 1s ease-out forwards;
`;
e.target.parentElement.appendChild(heart);
}
}
</script>代码整合使用
可以将以上特效组合使用，创建一个完整的表白页面：
<!DOCTYPE html>
<html>
<head>
<title>表白页</title>
<style>/* 爱心、背景样式 */</style>
</head>
<body>
<!-- 背景星空 -->
<div class="star-container">...</div>
<!-- 樱花飘落 -->
<div class="sakura">...</div>
<!-- 主体内容 -->
<div class="heart"></div>
<div class="message">我喜欢你</div>
<script>
// 打字机效果
// 鼠标跟随
// 点击爱心
// 纪念日计时
</script>
</body>
</html>特效对比表
| 特效 | 难度 | 适用场景 |
|---|---|---|
| 爱心跳动 | ⭐ | 页面装饰 |
| 打字机 | ⭐ | 情书展示 |
| 鼠标跟随 | ⭐⭐ | 惊喜效果 |
| 点击爱心 | ⭐⭐ | 互动表白 |
| 樱花飘落 | ⭐⭐ | 氛围营造 |
| 星空背景 | ⭐⭐⭐ | 浪漫场景 |
| 纪念日 | ⭐⭐ | 表白/纪念 |
| 爱心爆炸 | ⭐⭐ | 高潮时刻 |
💝 看到这里，你一定是个非常浪漫的人！祝表白成功，早日脱单~ 记得，选择最合适她的那个特效，才最容易成功哦！
评论