首页爱心跳动的html代码

爱心跳动的html代码

时间: 2023-11-20 09:56:57 浏览: 67

以下是一个简单的HTML代码实现爱心跳动的效果： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>爱心跳动</title> <style> .heart { position: absolute; width: 100px; height: 90px; transform: rotate(-45deg); background: red; animation: beat 1s ease-in-out infinite; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; } .heart:after { left: 0; border-radius: 0 0 50px 50px; } @keyframes beat { 0% { transform: scale(0.75); } 20% { transform: scale(1); } 40% { transform: scale(0.75); } 60% { transform: scale(1); } 80% { transform: scale(0.75); } 100% { transform: scale(0.75); } } </style> </head> <body> <div class="heart"></div> </body> </html> ```

阅读全文