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.
This Animation will look like an actual heartbeat.
| Code by | ShahedNoor |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | YES |
50+ HTML, CSS & JavaScript Projects With Source Code
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.
Step1: 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.
Output:
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Step2: 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.
Portfolio Website using HTML and CSS (Source Code)
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 .
10+ HTML CSS Projects For Beginners (Source Code)
.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;
}Output:
Here we have completed our CSS code and also the project is completed which means we have successfully added the Heartbeat Animation.
Preview Heartbeat Animation
Live Preview Of Heartbeat Animation Using HTML and CSS
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.
ADVERTISEMENT
Restaurant Website Using HTML And CSS With Source Code
ADVERTISEMENT
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.
ADVERTISEMENT
Which code editor do you use for this Heartbeat Animation project coding?
I personally recommend using VS Code Studio, it’s very simple and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this project is a responsive project.
ADVERTISEMENT
Do you use any external links to create this project?
No!
