首页用html写一个跳动爱心代码

用html写一个跳动爱心代码

时间: 2023-09-30 07:05:38 浏览: 175

以下是一个简单的用 HTML 和 CSS 实现跳动爱心的代码： ```html <!DOCTYPE html> <html> <head> <title>跳动爱心</title> <style> .heart { position: relative; width: 100px; height: 90px; transform: rotate(45deg); animation: beat 1s ease-in-out infinite; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background-color: 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> ``` 在浏览器中打开这个 HTML 文件，你就会看到一个跳动的爱心了。

阅读全文