首页写一个可以跳动的爱心代码

写一个可以跳动的爱心代码

时间: 2023-02-26 07:18:02 浏览: 99

这是一个使用 HTML 和 CSS 的简单爱心代码： ``` <!DOCTYPE html> <html> <head> <style> .heart { width: 40px; height: 40px; position: relative; animation: beat 1s infinite; } .heart:before, .heart:after { content: ""; position: absolute; top: 20px; left: 20px; width: 0; height: 0; border-radius: 50%; background: red; } .heart:before { transform: rotate(45deg); } .heart:after { transform: rotate(-45deg); } @keyframes beat { 0% { transform: scale(1); } 20% { transform: scale(1.2); } 40% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 这是一个简单的爱心形状，使用了 CSS3 动画（`animation`）实现了不断跳动的效果。

阅读全文