网页特效 八款浪漫表白代码合集

程序员表白的方式有多浪漫？这八款表白特效代码，总有一款能打动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>
<div class="typewriter" id="typewriter"></div>

<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>
<style>
@keyframes popHeart {
  0% { transform: scale(0); opacity:1; }
  100% { transform: scale(1.5); opacity:0; }
}
</style>

<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>
<style>
@keyframes fall {
  0% { transform: translateY(-30px) rotate(0deg); opacity:1; }
  100% { transform: translateY(200px) rotate(360deg); opacity:0; }
}
</style>
<div id="container"></div>

<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>
<style>
.star {
  position:absolute;
  width:4px;
  height:4px;
  background:#fff;
  border-radius:50%;
  animation: twinkle 1.5s infinite;
}
.shooting-star {
  position:absolute;
  width:80px;
  height:2px;
  background:linear-gradient(90deg,#fff,transparent);
  animation: shoot 1.5s linear forwards;
}
@keyframes twinkle {
  0%,100%{opacity:0.2}
  50%{opacity:1}
}
@keyframes shoot {
  0%{transform:translateX(0) translateY(0);opacity:1;}
  100%{transform:translateX(200px) translateY(200px);opacity:0;}
}
</style>
<div id="star-box"></div>

<script>
function updateTimer() {
  const start = new Date('2022-01-01');  // 在一起的日子
  const now = new Date();
  const diff = now - start;
  const day = 1000 * 60 * 60 * 24;
  const hour = 1000 * 60 * 60;
  const min = 1000 * 60;
  const days = Math.floor(diff / day);
  const hours = Math.floor((diff % day) / hour);
  const mins = Math.floor((diff % hour) / min);
  const secs = Math.floor((diff % min) / 1000);
  document.getElementById('timer').innerHTML =
    `在一起 ${days} 天 ${hours} 时 ${mins} 分 ${secs} 秒`;
}
setInterval(updateTimer, 1000);
</script>
<div id="timer"></div>

<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>
<style>
@keyframes explode {
  0% { transform: translate(0,0) scale(1); opacity:1; }
  100% { transform: translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}
</style>
<div id="boom-box">
  <button onclick="explodeHearts(event)">点击表白</button>
</div>

Hackyh'Blog版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！