Animated Heart code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated Heart</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="heart"></div> </body> </html>
2.style.css:
body { background: rgb(10,255,22); margin: 0; padding: 0; } .heart { width: 180px; height: 100px; position: absolute; top: 40%; left: 35%; background: rgb(253,38,242); transition: 1s; transform-origin: right bottom; } .heart::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgb(255,255,255); transition: 2s; transform-origin: right bottom; } .heart:hover { transform: rotate(45deg); border-top-left-radius: 50px; border-bottom-left-radius: 50px; } .heart:hover::before { background: rgb(253,38,242); border-top-left-radius: 50px; border-bottom-left-radius: 50px; transform: rotate(450deg) translateY(100px); }
