<> use css3 animation Achieve the effect of heartbeat

Direct code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</
title> <style type="text/css"> .container { position: relative; margin: 100px; }
.heart { position:relative; width: 100px; height: 100px; background: red;
animation: hit .5s infinite alternate; transform: rotate(45deg); } .heart:before
{ position: absolute; left: -50px; content: ''; width: 100px; height: 100px;
background: red; border-radius: 50%; animation: hitLeft .5s infinite alternate;
} .heart:after { position: absolute; top: -50px; content: ''; width: 100px;
height: 100px; background: red; border-radius: 50%; animation: hitTop .5s
infinite alternate; } @keyframes hit { from { width: 100px; height: 100px; } to
{ width:150px; height: 150px; } } @keyframes hitTop { from { width: 100px;
height: 100px; top: -50px; } to { width: 150px; height: 150px; top: -75px; } }
@keyframes hitLeft { from { width: 100px; height: 100px; left: -50px; } to {
width: 150px; height: 150px; left: -75px; } } </style> </head> <body> <div class
="container"> <div class="heart"></div> </div> </body> </html>

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