Animated Love Letter with HTML & CSS — Envelope Opening Effect

🎯 What You'll Build #

A realistic animated envelope that opens on click with a CSS 3D flip, revealing a love letter sliding up from inside. Pure CSS + minimal JavaScript!

---

📦 Get the Source Code #

> ☕ Download on Buy Me a Coffee →

---

🛠️ The Envelope CSS #

3D Flap Opening #

.envelope-flap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50%;
    background: linear-gradient(135deg, #5a9fe0, #4a90d9);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    transform-origin: top;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

.envelope.open .envelope-flap {
    transform: rotateX(180deg);
}

Letter Slide-Up #

.letter-paper {
    position: absolute;
    bottom: 10px; left: 10px; right: 10px;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transform: translateY(0);
    transition: transform 1s ease-out 0.5s;
    color: #333;
}

.envelope.open .letter-paper {
    transform: translateY(-120%);
}

JavaScript Trigger #

document.querySelector('.envelope').addEventListener('click', function() {
    this.classList.add('open');
});

---

🔗 Related #

• Apology Message Website for Best Friend

• Will You Be My Valentine?