当前位置：首页 > JavaScript

js实现贺卡

2026-04-05 22:57:03JavaScript

使用HTML、CSS和JavaScript创建动态贺卡

创建一个简单的贺卡需要结合HTML结构、CSS样式和JavaScript交互效果。以下是实现步骤：

HTML结构

<!DOCTYPE html>
<html>
<head>
    <title>电子贺卡</title>
    <style>
        /* CSS样式将放在这里 */
    </style>
</head>
<body>
    <div id="card-container">
        <div id="card" onclick="flipCard()">
            <div class="front">
                <h1>生日快乐！</h1>
                <p>点击打开贺卡</p>
            </div>
            <div class="back">
                <h2>给亲爱的朋友</h2>
                <p>愿你天天开心，心想事成！</p>
                <button onclick="playMusic()">播放音乐</button>
            </div>
        </div>
    </div>

    <audio id="bgMusic" src="happy-birthday.mp3"></audio>

    <script>
        // JavaScript代码将放在这里
    </script>
</body>
</html>

CSS样式

#card-container {
    perspective: 1000px;
    width: 300px;
    height: 400px;
    margin: 50px auto;
}

#card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    cursor: pointer;
}

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

#card .front, #card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#card .front {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    color: white;
}

#card .back {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
    transform: rotateY(180deg);
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

JavaScript交互

function flipCard() {
    const card = document.getElementById('card');
    card.classList.toggle('flipped');
}

function playMusic() {
    const music = document.getElementById('bgMusic');
    music.play();
}

// 添加动画效果
document.addEventListener('DOMContentLoaded', function() {
    const card = document.getElementById('card');
    card.style.transform = 'rotateY(0deg)';
});

添加更多交互功能

添加图片和文字输入

<div class="back">
    <img src="celebration.png" alt="庆祝" width="100">
    <h2 contenteditable="true">给亲爱的朋友</h2>
    <p contenteditable="true">编辑您的祝福语...</p>
    <button onclick="saveCard()">保存贺卡</button>
</div>

JavaScript保存功能

function saveCard() {
    const card = document.getElementById('card');
    html2canvas(card).then(canvas => {
        const link = document.createElement('a');
        link.download = '贺卡.png';
        link.href = canvas.toDataURL();
        link.click();
    });
}

使用第三方库增强效果

添加confetti效果

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>

<script>
function playMusic() {
    const music = document.getElementById('bgMusic');
    music.play();
    confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 }
    });
}
</script>

添加动画库

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<script>
function flipCard() {
    const card = document.getElementById('card');
    card.classList.toggle('flipped');
    card.classList.add('animate__animated', 'animate__flipInY');
}
</script>