首页用html做一个复杂的表白动画

用html做一个复杂的表白动画

时间: 2023-12-22 12:04:32 浏览: 90

好的，以下是一个比较复杂的表白动画的 HTML 代码示例： ```html <!DOCTYPE html> <html> <head> <title>复杂表白动画</title> <meta charset="UTF-8"> <style> body { background-color: #f1f1f1; font-family: Arial, sans-serif; height: 100vh; overflow: hidden; } #heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: heartbeat 2s infinite; } #heart:before, #heart:after { content: ""; position: absolute; background-color: #ff69b4; border-radius: 50%; } #heart:before { width: 100px; height: 100px; top: -50px; left: 0px; } #heart:after { width: 100px; height: 100px; top: 0px; left: 50px; } .message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; color: #ff69b4; animation: message 2s infinite; opacity: 0; } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes message { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <div id="heart"></div> <div class="message">我喜欢你</div> </body> </html> ``` 这个代码将创建一个红色的心形图案和一个显示“我喜欢你”文本的标语，它们将以动画的形式同时显示在屏幕上。心形图案将以心跳动画的方式跳动，文本标语将以闪烁的方式出现和消失。您可以根据自己的需要修改和调整该代码，以创建更具个性化的复杂表白动画效果。

阅读全文