Let's make a simple heartbeat effect today , It doesn't take a lot of code , Add a box , make the best of CSS Just show it .
1. First, we add a visual box to the page
<body> <div class="heart"></div> </body>
2. And then give it a heart
.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, let's animate animation, Let's talk about it here animation Must and @keyframes Use it together , Because animation has no animation frame, how to move , Just like you use chopsticks with two , You don't have to use a pair of horns .
animation:scale 1s linear infinite; /* name 1s Uniform velocity Infinite cycle */
Let's double it horizontally and vertically
@keyframes scale{ /* Animation frame */ 50%{transform:scale(2)} }
Then let's look at the effect

ha-ha , A little ugly , A partner who doesn't like it can change his appearance , After all, personal aesthetic is limited. Hahaha , I don't know how to express myself when I first blog , Anyway, it's all here , Send the source code below ~
<!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 velocity Infinite cycle */ } @keyframes scale{
/* Must and animation Together Animation frame */ 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>
Thank you for reading ,Nicole I will continue to share some interesting cases from time to time , If there is a problem, we can exchange ducks together ~

Technology
©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )