返回

用 JavaScript 制作一个美观且可互动的祝福卡

前端

用 JavaScript 为亲人制作一个独特的生日贺卡

创建 HTML 结构

HTML 结构为你的贺卡提供骨架。首先创建一个 HTML 文件并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="front">
                <h1>Happy Birthday!</h1>
                <p>To the best friend in the world!</p>
            </div>
            <div class="back">
                <p>Wishing you a day filled with joy, laughter, and love. May all your dreams come true!</p>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
  • <div class="container">：包含整个贺卡。
  • <div class="card">：卡片本身，包括正面和背面。
  • <div class="front">：卡片的正面，显示标题和信息。
  • <div class="back">：卡片的背面，显示祝福语。

添加 CSS 样式

CSS 样式让你的贺卡焕发生机。创建一个名为 style.css 的文件并添加以下代码：

/* 重置样式 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 卡片样式 */

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    width: 500px;
    height: 300px;
    perspective: 1000px;
    transition: transform 0.5s ease-in-out;
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.front {
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
}

/* 卡片翻转动画 */

.card:hover {
    transform: rotateY(180deg);
}

/* 卡片正面样式 */

.front {
    background-color: #ff0000;
    color: #ffffff;
    text-align: center;
}

h1 {
    font-size: 3em;
    margin-top: 50px;
}

p {
    font-size: 1.5em;
    margin-top: 20px;
}

/* 卡片背面样式 */

.back {
    background-color: #ffffff;
    color: #000000;
    text-align: center;
}

p {
    font-size: 1.5em;
    margin-top: 50px;
}
  • 重置样式确保跨浏览器一致性。
  • 卡片样式定义了卡片的尺寸、透视和过渡效果。
  • 正面和背面样式定义了背景颜色、文本颜色和文本对齐方式。

添加 JavaScript 代码

JavaScript 代码使卡片能够在鼠标悬停时翻转。在 script.js 文件中添加以下代码：

// 获取卡片元素
const card = document.querySelector('.card');

// 监听鼠标悬停事件
card.addEventListener('mouseover', () => {
    // 卡片翻转动画
    card.classList.add('flip');
});

// 监听鼠标离开事件
card.addEventListener('mouseout', () => {
    // 卡片复原动画
    card.classList.remove('flip');
});
  • 当鼠标悬停在卡片上时，mouseover 事件监听器会为卡片添加 flip 类，从而触发翻转动画。
  • 当鼠标离开卡片时，mouseout 事件监听器会删除 flip 类，使卡片复原。

部署你的贺卡

现在，你已经创建了一个用 JavaScript 制作的生日贺卡！你可以将 HTML、CSS 和 JavaScript 文件存储在 GitHub 或 CodePen 等代码托管平台上。然后，只需将贺卡的链接分享给亲人，让他们享受你创造的惊喜。

常见问题解答

  1. 如何自定义贺卡的外观？
    你可以通过更改 style.css 文件中的颜色、字体和文本来定制贺卡的外观。

  2. 如何添加自己的图像？
    在 style.css 文件中，你可以使用 background-image 属性添加背景图像。

  3. 如何添加音乐或声音效果？
    可以在 HTML 中添加 <audio> 元素，并在 JavaScript 中使用 play() 方法播放音乐或声音效果。

  4. 如何添加交互性？
    你可以使用 JavaScript 事件监听器，例如 click 或 keypress，来添加交互性，例如弹出窗口或触发动画。

  5. 在哪里可以找到更多资源？
    有关 HTML、CSS 和 JavaScript 的更多资源，请访问 W3Schools 或 MDN Web Docs。