首页炫酷表白网页html代码

炫酷表白网页html代码

时间: 2024-10-02 16:03:59 浏览: 33

创建一个炫酷的表白网页HTML代码通常会包含一些吸引人的设计元素、文本内容和可能的动画效果。以下是一个简单的例子，展示如何构建基础结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>炫酷表白页面</title> <style> /* 添加一些基本样式 */ body { background-color: #f0f0f0; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; transition: background-color 0.5s ease; } .message-container { position: relative; width: 400px; height: auto; text-align: center; border: 2px solid #ff69b4; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; background-color: white; z-index: 2; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } /* 动画效果 */ .message-box { animation: fadeIn 1s ease forwards; display: none; } </style> </head> <body> <div class="message-container"> <h1 class="message-box">亲爱的<span id="nameInput" style="display: inline-block; color: blue;">[对方名字]</span>,</h1> <p>我一直想对你说...<br> <span id="messageInput">[表白内容]</span><br> 愿我们的故事从此开始...</p> <button onclick="revealMessage()">点击接收我的心意</button> </div> <script> function revealMessage() { document.querySelector('.message-box').style.display = 'block'; } </script> </body> </html> ``` 在这个例子中，你需要替换`[对方名字]`和`[表白内容]`为你想要表达的内容，并可以在JavaScript部分添加更复杂的交互，比如从输入框获取名字和信息。

阅读全文