Heart-Shape Design with Heartbeat Effect Using Html and Css

In this article, we'll show you how to make a special design on a webpage. Imagine a heart shape that seems to beat like a real heart. We're going to create this fascinating effect using only HTML and CSS, the basic building blocks of the web. Whether you're new to web design or have some experience, our step-by-step guide will help you bring life to your web projects. Let's dive in and learn how to make a heart shape that pulses with a heartbeat effect, all with the power of HTML and CSS. For gsap animations you can follow the gsap playlist. You can explore further articles on web development by checking out this list.

01. HTML
02. CSS
03. Output

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
<head>
  <title>Heart-Shape Design with Heartbeat Effect Using Html and Css</title>
</head>
<body>

  // Content

</body>
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
  <title>Heart-Shape Design with Heartbeat Effect Using Html Css Only</title>
</head>
<body>

  <div id="left"></div>
  <div id="right"></div>

</body>
</html>

Read Also:

CSS:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10%;
  animation-name: beat;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#right,
#left {
  width: 200px;
  height: 200px;
  background-color: rgb(182, 0, 0);
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

#right {
  position: relative;
  left: -50px;
  transform: rotate(-45deg);
}

#right::before {
  content: '';
  width: 200px;
  height: 200px;
  background-color: rgb(182, 0, 0);
  position: absolute;
  left: -105px;
}

#left {
  transform: rotate(-135deg);
}

#left::before {
  content: '';
  width: 200px;
  height: 200px;
  background-color: rgb(182, 0, 0);
  position: absolute;
  left: -105px;
}

@keyframes beat {
  0% {transform: scale(1.2);}
  50% {
    transform: scale(0.8);
    background-color: lightpink;
  }
  100% {transform: scale(1.2);}
}

body: Styles the entire webpage.
- display: flex;: Uses flexbox for layout.
- align-items: center; and justify-content: center;: Centers content vertically and horizontally.
- margin-top: 10%;: Adds a margin at the top.
- animation-name, animation-duration, and animation-iteration-count: Sets up an animation named "beat" with a 2-second duration and an infinite iteration count.
#right and #left: These are two div elements with IDs for styling.
- They create the right and left sides of the heart shape.
- They have a width and height, a background color of red, and rounded edges to form a half-heart shape.
#right: Styles the right half of the heart.
- position: relative; and left: -50px;: Moves it to the left.
- transform: rotate(-45deg);: Rotates it.
#right::before: Creates a pseudo-element for the right half.
- It's similar to the #right but is positioned slightly differently.
#left: Styles the left half of the heart.
- transform: rotate(-135deg);: Rotates it.
#left::before: Creates a pseudo-element for the left half.
- Similar to the #left but positioned differently.
@keyframes beat: Defines a keyframe animation named "beat."
- At 0%, it scales the heart shape up.
- At 50%, it scales it down and changes the background color to light pink.
- At 100%, it returns the heart to its original size.

Read Also:

Output:

Read Also: