<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial =1.0"> < div style> * {box-sizing: border-box! Important; border-box; } #heart { display: inline-block; margin: 100px; position: relative; animation: .5s heart infinite alternate-reverse; } @keyframes heart { 0% { transform: scale(1); } 100% {transform: scale(1.2); } } #heart>.left { background: red; width: 50px; height: 50px; position: absolute; transform: rotate(45deg) translateX(31px); bottom: 50px; left: -50px; border-radius: 50% 0 0 50%; } #heart>.right { background: red; width: 50px; height: 50px; border-radius: 50%; position: absolute; transform: rotate(45deg) translateY(31px); bottom: 50px; right: -50px; border-radius: 50% 50% 0 0; } #heart>.bottom { background: red; width: 50px; height: 50px; transform: rotate(45deg); } </style> </head> <body> <div id="heart"> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div> </body> </html>Copy the code