首页写一个html的动态爱心程序

写一个html的动态爱心程序

时间: 2023-10-24 09:07:51 浏览: 172

当然可以！以下是一个使用CSS动画的动态爱心程序： ```html <!DOCTYPE html> <html> <head> <title>动态爱心程序</title> <style> .heart { width: 100px; height: 100px; background-color: red; position: relative; transform: rotate(45deg); margin: 50px; animation: heartbeat 1s infinite; } .heart::before, .heart::after { content: ""; width: 100px; height: 100px; background-color: red; border-radius: 50%; position: absolute; } .heart::before { top: -50px; left: 0; } .heart::after { top: 0; left: 50px; } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 你可以将以上代码保存为一个 `.html` 文件，然后在浏览器中打开它，就会看到一个动态的红色爱心形状！希望你喜欢这个动态的爱心程序！如果你有其他问题，可以继续问我。

阅读全文