HTML+CSS to create heartbeat special effects

Today we are going to create a simple heartbeat effect. It does not require a lot of code. Just add a box and make full use of CSS to display it.

1. First, we add a visual box to the page

<body>
	<div class="heart"></div>
 </body>

2. Then turn it into a heart first

    .heart{
		position:relative;
		width:100px; 
		height:100px;
		margin:100px;
	 }

.heart:after,
.heart:before{
	position:absolute;
	width:60px;
	height:100%;
	background-color:#ff6666;
	content:"";
	border-radius:50% 50% 0 0;
}
.heart:before{
	left:0;
	transform:rotate(-52deg);
}
.heart:after{
	right:0;
	transform:rotate(49deg);
}

3. Finally, set up the animation. Here I have to say that animation must be used together with @keyframes, because how can the animation move without animation frames? It's like you use two chopsticks, and you definitely don't use just one.

animation:scale 1s linear infinite;
           /*Name 1s uniform infinite loop*/

We make it twice as large horizontally and vertically

@keyframes scale{ /* animation frame */
		50%{transform:scale(2)}
	}

Then let’s look at the effect

insert image description here

Haha, it's a bit ugly. If you don't like it, you can change the appearance yourself. After all, personal aesthetics are limited. Hahaha. This is my first time writing a blog and I don't know how to express myself. Anyway, the process is here. Here is the source code~

<!doctype html>
<html>
  <head> 
  <meta charset="UTF-8">
  <title>Heartbeat Effect</title>
  <style>
	*{margin:0; padding:0;}
	li{list-style:none;}
	a{text-decoration:none;}

	.heart{
		position:relative;
		width:100px; 
		height:100px;
		margin:100px;
		animation:scale 1s linear infinite;  
		/*Name 1s uniform infinite loop*/
	}
	@keyframes scale{ /*Must use animation frames together with animation*/
		50%{transform:scale(2)}
	}
	.heart:after,
	.heart:before{
		position:absolute;
		width:60px;
		height:100%;
		background-color:#ff6666;
		content:"";
		border-radius:50% 50% 0 0;
	}
	.heart:before{
		left:0;
		transform:rotate(-52deg);
	}
	.heart:after{
		right:0;
		transform:rotate(49deg);
	}
  </style>
 </head> 

 <!-- Visualization area -->
 <body>
	<div class="heart"></div>
 </body>
</html>

This is the end of this article about how to create heartbeat special effects with HTML+CSS. For more relevant HTML+CSS heartbeat content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Centering the Form in HTML

>>: HTML+CSS to achieve cyberpunk style button