超浪漫！用 HTML 实现的互动情书贺卡源码来袭

木子乔乔

于 2025-03-27 17:31:50 发布

阅读量645

点赞数 24

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_44975687/article/details/146566679

版权

家人们，今天我要给大家分享一个超赞的 HTML 源码 —— 互动情书贺卡！

在这个数字化的时代，用代码写情书已经成为了一种独特又浪漫的表达方式。这份源码就为我们提供了一个绝佳的范例，让我们可以借助代码的力量，向心爱的人传达深情厚意。

亮点满满，浪漫升级

视觉盛宴：整体背景采用了温馨浪漫的淡粉色，就像初恋般甜蜜，让人一眼就沉浸在这份爱意之中。页面中还会随机飘落象征着爱意的红心，仿佛是满满的爱从天而降，氛围感直接拉满！
字体文艺：巧妙引用了 Google Fonts 的 Pacifico 字体，这种独特的手写风格字体，为情书增添了一份文艺与优雅，让每一个字都仿佛带着温度。
交互有趣：贺卡设置了一个互动按钮，当点击按钮时，会显示出隐藏的心里话。这种神秘感就像一场小小的惊喜，让对方在探索中感受到更多的爱意。

易于上手，轻松定制

即使你是 HTML 初学者，也完全不用担心，这份源码结构清晰、注释详细，很容易理解和上手。你可以根据自己的喜好对文字内容、颜色、动画效果等进行修改，打造出专属你们的独特情书贺卡。

用途广泛，爱意无限

无论是在情人节、纪念日，还是日常想要给对方一个小惊喜，这个互动情书贺卡都能派上用场。它不仅是一份礼物，更是你对爱人深情告白的载体。

还等什么呢？赶紧拿走这份源码，用代码书写属于你们的浪漫爱情故事吧！

<!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>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

body {
background: #FFB6C1;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
font-family: 'Pacifico', cursive;
}

.card {
background-color: rgba(255, 255, 255, 0.8);
padding: 40px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
z-index: 1;
}

h1 {
color: #ff1493;
font-size: 48px;
margin-bottom: 20px;
}

p {
color: #333;
font-size: 20px;
line-height: 1.6;
}

.heart {
position: absolute;
top: -50px;
animation: fall linear infinite;
color: #ff1493;
font-size: 24px;
}

@keyframes fall {
to {
top: 100vh;
}
}

button {
background-color: #ff1493;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s;
}

button:hover {
background-color: #ff69b4;
}

#secret-message {
display: none;
margin-top: 20px;
font-style: italic;
}
</style>
</head>

<body>
<div class="card">
<h1>亲爱的，这是给你的情书</h1>
<p>在时光长河中，与你相遇是我最美的意外。你的笑容如春日暖阳，照亮我生活的每一个角落；你的温柔似潺潺溪流，滋润我干涸的心田。每一次和你相处，都让我愈发坚信，你就是我一直在寻找的那个人。</p>
<button οnclick="showSecretMessage()">点击查看我的心里话</button>
<p id="secret-message">其实，我想告诉你，我喜欢你，不仅仅是因为你的外表，更是因为你善良的内心、独特的灵魂。我希望能一直陪伴在你身边，和你一起经历生活的酸甜苦辣，一起创造属于我们的美好回忆。</p>
</div>

function createFallingHeart() {
const heart = document.createElement('span');
heart.classList.add('heart');
heart.textContent = '💖';
heart.style.left = Math.random() * window.innerWidth + 'px';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
document.body.appendChild(heart);

setTimeout(() => {
document.body.removeChild(heart);
}, 5000);
}

setInterval(createFallingHeart, 500);
</script>
</body>

</html>