How to write HTML code for a beating heart?

2 years ago
Olivia Parker
1 minute

Here is a simple example of HTML code that makes a heart icon pulse.

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.heart {
  animation: heartbeat 1s infinite;
  color: red;
}
</style>
</head>
<body>
  <span class="heart">❤️</span>
</body>
</html>

In the code above, we have utilized the CSS @keyframes rule to define an animation named “heartbeat.” This animation achieves the effect of the heart expanding and contracting at different percentages. Next, we apply the animation to a span element using the .heart selector and set it to have a red color.

bannerAds