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
Detailed explanation of JavaScript clipboard usage
(1) Introduction: clipboard.js is a lightweight J...
Writing a shell script in Ubuntu to start automatically at boot (recommended)
The purpose of writing scripts is to avoid having...
Achieve 3D flip effect with pure CSS3 in a few simple steps
As a required course for front-end developers, CS...
Some lesser-known sorting methods in MySQL
Preface ORDER BY 字段名升序/降序, I believe that everyon...
Detailed explanation of MySQL group sorting to find the top N
MySQL group sorting to find the top N Table Struc...
Tutorial on installing Pycharm and Ipython on Ubuntu 16.04/18.04
Under Ubuntu 18.04 1. sudo apt install python ins...
Solution to the problem of English letters not wrapping in Firefox
The layout of text has some formatting requiremen...
Let's talk in detail about the direction of slow SQL optimization in MySQL
Table of contents Preface SQL statement optimizat...
JavaScript BOM Explained
Table of contents 1. BOM Introduction 1. JavaScri...
How to automatically backup the script for Linux servers (mysql, attachment backup)
1. Create the backup.sh script file #!/bin/sh SOU...
Vant uploader implements the drag-and-drop function for uploading pictures (set as cover)
The effect diagram is as follows: <!DOCTYPE ht...
How can the front end better display the 100,000 pieces of data returned by the back end?
Table of contents Preliminary work Backend constr...
Write a dynamic clock on a web page in HTML
Use HTML to write a dynamic web clock. The code i...
Tutorial on configuring and changing passwords for the MySQL free installation version
Step 1: Configure environment variables (my decom...
How to implement Svelte's Defer Transition in Vue
I recently watched Rich Harris's <Rethinki...