DEV Community

Cover image for Create a Heart Shaped Animation with CSS3
Mark Yu
Mark Yu

Posted on

Create a Heart Shaped Animation with CSS3

Introduction

Creating a personalized love confession page can be a fun and heartfelt way to express your feelings. By using HTML5, CSS3 animations, and a touch of JavaScript, you can create a beautiful page with an animated heart effect. In this tutorial, we will walk you through a simple example to get you started.

Step-by-Step Guide

1. HTML Structure

First, we need to set up our HTML structure. This includes a div for the heart shape and a div for the text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>520 Confession</title>
    <style>
        @keyframes heartBeat {
            0% { transform: scale(1); }
            25% { transform: scale(1.1); }
            50% { transform: scale(1); }
            75% { transform: scale(0.9); }
            100% { transform: scale(1); }
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0e0d8;
            margin: 0;
            overflow: hidden;
        }

        .heart {
            position: relative;
            width: 100px;
            height: 90px;
            animation: heartBeat 1s infinite;
        }

        .heart:before,
        .heart:after {
            content: "";
            position: absolute;
            width: 50px;
            height: 80px;
            background-color: red;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
            top: 0;
            left: 50px;
        }

        .heart:after {
            left: 0;
            transform: rotate(45deg);
        }

        .text {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="heart"></div>
    <div class="text">520 I Love You</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. CSS Styling

In this example, we use CSS3 animations to create a heartbeat effect. The @keyframes rule defines the animation named heartBeat, which scales the heart shape at different intervals.

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0e0d8;
    margin: 0;
    overflow: hidden;
}

.heart {
    position: relative;
    width: 100px;
    height: 90px;
    animation: heartBeat 1s infinite;
}

.heart:before,
.heart:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 80px;
    background-color: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    top: 0;
    left: 50px;
}

.heart:after {
    left: 0;
    transform: rotate(45deg);
}

.text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 24px;
    font-family: Arial, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

3. Detailed Explanation

To help you understand each part of the code, let's break it down:

HTML Structure:

  • The <!DOCTYPE html> declaration defines the document type as HTML5.
  • The <html lang="en"> tag sets the language of the document to English.
  • Inside the <head> tag, we define the character encoding with <meta charset="UTF-8"> and the title of the page with <title>520 Confession</title>.

CSS Styling:

  • @keyframes heartBeat: Defines the keyframe animation sequence for the heart. The heart scales up and down to create a beating effect.

    • 0% and 100%: Scale at normal size.
    • 25%: Scale up to 1.1 times the original size.
    • 75%: Scale down to 0.9 times the original size.
  • body: Styles the body of the document to center the content both horizontally and vertically.

    • display: flex; justify-content: center; align-items: center;: Uses Flexbox to center the items.
    • height: 100vh;: Sets the height to 100% of the viewport height.
    • background-color: #f0e0d8;: Sets the background color.
    • margin: 0;: Removes the default margin.
    • overflow: hidden;: Hides any overflow content.
  • .heart: Styles the heart container.

    • position: relative;: Positions the element relative to its normal position.
    • width: 100px; height: 90px;: Sets the size of the heart.
    • animation: heartBeat 1s infinite;: Applies the heartbeat animation with a 1-second duration, running infinitely.
  • .heart:before, .heart:after: Styles the pseudo-elements to create the heart shape.

    • content: "";: Adds content for the pseudo-elements.
    • position: absolute;: Positions the elements absolutely within the .heart container.
    • width: 50px; height: 80px; background-color: red;: Sets the size and color of the pseudo-elements.
    • border-radius: 50px 50px 0 0;: Rounds the top corners to form the top of the heart.
    • transform: rotate(-45deg); top: 0; left: 50px;: Rotates and positions the left half of the heart.
    • .heart:after: Rotates and positions the right half of the heart.
  • .text: Styles the text element.

    • position: absolute; top: 50%; transform: translateY(-50%);: Centers the text vertically within the heart.
    • color: #fff;: Sets the text color to white.
    • font-size: 24px; font-family: Arial, sans-serif;: Sets the font size and family.

Conclusion

This example demonstrates how to create a simple, yet visually appealing love confession page with an animated heart effect using HTML5 and CSS3. You can further customize the styles and animations to suit your needs and make your confession page even more special.

Feel free to experiment with different colors, sizes, and animation timings to create a unique and personalized experience.


I hope this helps you create your own beautiful and animated love confession page!

Top comments (0)