HTML+CSS to create heartbeat special effects

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

Recommend

Teach you how to achieve vertical centering elegantly (recommended)

Preface There are many ways to center horizontall...

Example of how to install kong gateway in docker

1. Create a Docker network docker network create ...

Instructions for nested use of MySQL ifnull

Nested use of MySQL ifnull I searched online to s...

Detailed explanation of mandatory and implicit conversion of types in JavaScript

Table of contents 1. Implicit conversion Conversi...

Can CSS be used like this? The art of whimsical gradients

In the previous article - The charm of one line o...

Detailed explanation of basic operation commands for Linux network settings

Table of contents View network configuration View...

CSS description of the implementation code for displaying text at the end of the horizontal progress bar

Problem Description I want to achieve the followi...

How to change the mysql password on the Xampp server (with pictures)

Today, I found out while working on PHP that if w...

An article teaches you how to implement VUE multiple DIVs and button binding enter events

There is currently a requirement that an operatio...

How to modify the default submission method of the form

The default submission method of html is get inste...

MySQL example of getting today and yesterday's 0:00 timestamp

As shown below: Yesterday: UNIX_TIMESTAMP(CAST(SY...

Some parameter descriptions of text input boxes in web design

<br />In general guestbooks, forums and othe...

JavaScript prototype and prototype chain details

Table of contents 1. prototype (explicit prototyp...

Implementation of effective user groups and initial user groups in Linux

First check the /etc/group file: [root@localhost ...

How to replace all tags in html text

(?i) means do not match case. Replace all uppercas...