首页前端做一个跳动浪漫的爱心代码

前端做一个跳动浪漫的爱心代码

时间: 2024-04-30 13:14:10 浏览: 74

以下是一个前端实现跳动浪漫的爱心代码的例子： ```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:before { transform: rotate(-45deg); } .heart:after { transform: rotate(45deg); } @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> ```

阅读全文