<> use CSS make beating heart Animation of

* First, make a red square that is completely centered . <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <
title>A beating heart</title> <style type="text/css"> * { margin: 0; padding: 0;
}#div1 { width: 100px; height: 100px; background-color: red; position: absolute;
left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } </style> </head> <
div id="div1"> </div>
* Add two semicircles to a square and transform it into a heart
Here are some codes
#lefthalf { width: 50px; height: 100px; background-color: red; position:
absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px; float:
left; border-radius: 50px 0px 0px 50px; } #righthalf { width: 100px; height:
50px; background-color: red; position: absolute; left: 50%; top: 50%;
margin-left: -50px; margin-top: -100px; border-radius: 50px 50px 0px 0px; }
Because the whole image is tilted , We need to put the whole heart in the right place , So rotate it , And add jumping animation , The final complete code is as follows :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>A beating heart</
title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 100px
; height: 100px; background-color: red; position: absolute; left: 50%; top: 50%;
margin-left: -50px; margin-top: -50px; } #lefthalf { width: 50px; height: 100px;
background-color: red; position: absolute; left: 50%; top: 50%; margin-left:
-100px; margin-top: -50px; float: left; border-radius: 50px 0px 0px 50px; }
#righthalf { width: 100px; height: 50px; background-color: red; position:
absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -100px;
border-radius: 50px 50px 0px 0px; } @keyframes scaleDraw { 50% { transform:
rotate(45deg) scale(0.7); } 75% { transform: rotate(45deg) scale(1.5); } }
#heart { width: 100px; height: 150px; position: absolute; left: 50%; top: 50%;
margin-top: -40px; transform: rotate(45deg); -webkit-animation-name: scaleDraw;
animation-iteration-count: infinite; -webkit-animation-duration: 1s; } </style>
</head> <body> <div id="heart"> <div id="lefthalf"> </div> <div id="div1"> </div
> <div id="righthalf"> </div> </div> </body> </html>
design sketch :

Technology
©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library ) Some East 14 Pay change 16 salary , Sincerity or routine ? Browser kernel ( understand )java Four functional interfaces ( a key , simple )HashMap Explain in detail html Writing about cherry trees , Writing about cherry trees os Simple use of module