How to make Heart Animation using HTML and CSS Code?

Hello there, Coders. We'll make a Heartbeat animation in this article. A heart animation is a good practice for web development, especially for beginners. We will create a stunning responsive Heartbeat Animation Website using HTML and CSS.

Heartbeat Animation is a simple project in which we will utilise an css concept to make the heart shape of a heart that will be animated in a manner similar to how a genuine heart would beat as a result of the inflow and outflow of oxygen within our hearts. In this project, we'll make a heartbeat animation that is similar to that.

I hope you must have got an idea about the project.

So, Let’s Begin Our Heartbeat Animation Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

HTML code for Heartbeat Animation

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="" content="">
    <title>Heart</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="heart">Your Heart</div>
</body>

</html>

The HTML content is straightforward in our project we just need to add a div tag with a class name as Heart. The div tag is block-level element that covers the whole width of the screen.

That's all there is to HTML code. So we begin by adding CSS.

CSS code for Heartbeat Animation

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

**Now we will look at our CSS code**

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92vh;
    background: black;
}

.heart {
    height: 100px;
    width: 100px;
    background: red;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px red;
    animation: heart 0.6s linear infinite;
}

@keyframes heart {
    0% {
        transform: rotate(-45deg) scale(1.00);
    }
    80% {
        transform: rotate(-45deg) scale(0.90);
    }
    100% {
        transform: rotate(-45deg) scale(0.80);
    }
}

.heart::before {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background: red;
    top: -55%;
    border-radius: 50px;
    box-shadow: -10px 10px 90px red;
}

.heart::after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background: red;
    right: -55%;
    border-radius: 50px;
    box-shadow: -10px 10px 90px red;
}

Step1: Here We have added our CSS code for the heartbeat effect. First, we have added margin and padding values as zero and display as flex. Then we align the item at the center also we provided the minimum height to our body and background colour as black.

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92vh;
    background: black;
}

Step 2: Second we just create Class Seceltor in Css for targeting the Heart class selector to select the block level element(div) and we initialized its height and width to 100px and the background color gives red to the heart and we just used the transform property to rotate the heart. We also used keyframes so that our animation changes gradually.

heart {
    height: 100px;
    width: 100px;
    background: red;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px red;
    animation: heart 0.6s linear infinite;
}

@keyframes heart {
    0% {
        transform: rotate(-45deg) scale(1.00);
    }
    80% {
        transform: rotate(-45deg) scale(0.90);
    }
    100% {
        transform: rotate(-45deg) scale(0.80);
    }
}

Step3: The properties inside(h1:before & h1:after)are the position as absolute and background as red same height and width ,Top is -55% covers the space above -55% relative to the div tag. Also, we have the radius to the border as 50px .

.heart::before {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background: red;
    top: -55%;
    border-radius: 50px;
    box-shadow: -10px 10px 90px red;
}

.heart::after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background: red;
    right: -55%;
    border-radius: 50px;
    box-shadow: -10px 10px 90px red;
}

Here we have completed our CSS code and also the project is completed which means we have successfully added the Heartbeat Animation.

Now We have Successfully created our Heartbeat Animation. You can use this project for developing your frontend skills and the respective lines of code are given with the code pen link mentioned below.

If you find this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and follow the Code with Random Instagram page.

Follow : @codewithrandom

Written by : Arun

Blog

How to make Heart Animation using HTML and CSS Code?

Codewithrandom Blogs

HTML code for Heartbeat Animation

CSS code for Heartbeat Animation

Join Our Newsletter. No Spam, Only the good stuff.

Related