首页写一个爱心动态网页代码

写一个爱心动态网页代码

时间: 2023-08-30 14:10:15 浏览: 77

非常感谢您的问题！以下是一个简单的爱心动态网页代码： ```html <!DOCTYPE html> <html> <head> <title>爱心动态网页</title> <style> body { background-color: #f3f3f3; } .heart { position: absolute; width: 100px; height: 100px; background-color: #e74c3c; transform: rotate(45deg); } .heart::before, .heart::after { content: ""; position: absolute; width: 100px; height: 100px; background-color: #e74c3c; border-radius: 50%; } .heart::before { top: -50px; left: 0; } .heart::after { top: 0; left: -50px; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: #fff; text-shadow: 1px 1px #000; } </style> </head> <body> <div class="heart"></div> <div class="text">我爱你</div> <script> const heart = document.querySelector(".heart"); let angle = 0; setInterval(() => { angle += 1; heart.style.transform = `rotate(${angle}deg)`; }, 10); </script> </body> </html> ``` 希望您喜欢这个简单的爱心动态网页代码！如果您有任何其他问题，请随时问我！

阅读全文