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
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
Design Theory: A Method to Understand People's Hearts
<br />Once, Foyin and Mr. Dongpo were chatti...
Record the steps of using mqtt server to realize instant communication in vue
MQTT Protocol MQTT (Message Queuing Telemetry Tra...
An example of how to quickly deploy web applications using Tomcat in Docker
After learning the basic operations of Docker, we...
Getting Started Tutorial for Beginners: Domain Name Resolution and Binding
So after registering a domain name and purchasing...
html a link tag title attribute line break mouse hover prompt content line break effect
The method of wrapping the content (title attribut...
How to implement controllable dotted line with CSS
Preface Using css to generate dotted lines is a p...
Comprehensive understanding of Node event loop
Table of contents Node Event Loop Event loop diag...
How to hide the border/separation line between cells in a table
Only show the top border <table frame=above>...
Implementation example of Vue+Element+Springboot image upload
Recently, I happened to be in touch with the vue+...
Scary Halloween Linux Commands
Even though it's not Halloween, it's wort...
Tutorial for installing MySQL 8.0.18 under Windows (Community Edition)
This article briefly introduces how to install My...
Four solutions for using setTimeout in JS for loop
Table of contents Overview Solution 1: Closures S...
Steps to purchase a cloud server and install the Pagoda Panel on Alibaba Cloud
Alibaba Cloud purchases servers Purchase a cloud ...
How to choose transaction isolation level in MySQL project
introduction Let's start with our content. I ...
Issues with locking in MySQL
Lock classification: From the granularity of data...