首页写一段动态爱心代码，要求使用html及css

写一段动态爱心代码，要求使用html及css

时间: 2023-03-12 10:46:10 浏览: 109

<html> <head> <title>爱心动态效果</title> <style> body { background-color: #F5F5F5; } .heart { position: relative; width: 100px; height: 90px; background-color: #FF0000; animation: heart-beat 1s infinite; transform-origin: center; margin: 200px auto; } .heart::before, .heart::after { position: absolute; content: ''; width: 100px; height: 90px; background-color: #FF0000; } .heart::before { top: -50px; left: 0; transform: rotate(-45deg); } .heart::after { top: 50px; left: 0; transform: rotate(45deg); } @keyframes heart-beat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html>

阅读全文