首页用HTML写一个复杂点的带爱心的表白文件

用HTML写一个复杂点的带爱心的表白文件

时间: 2024-05-05 11:21:09 浏览: 80

好的，我可以给你提供一个简单的HTML代码示例，你可以根据自己的需求进行修改。 ```html <!DOCTYPE html> <html> <head> <title>表白</title> <style> body { background-color: #e6e6e6; font-family: Arial, sans-serif; font-size: 16px; } h1 { color: #ff69b4; text-align: center; margin-top: 50px; } #heart { width: 200px; height: 200px; margin: 0 auto; position: relative; } #heart:before, #heart:after { content: ""; position: absolute; left: 100px; top: 0; width: 100px; height: 150px; background: #ff69b4; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; border-radius: 0 0 50% 50%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; border-radius: 0 0 50% 50%; } p { text-align: center; margin-top: 50px; font-size: 24px; color: #ff69b4; } </style> </head> <body> <h1>我对你的心意</h1> <div id="heart"></div> <p>我喜欢你，你愿意做我女朋友吗？</p> </body> </html> ``` 在这个示例中，我们使用了一个伪元素来创建一个爱心形状，并使用CSS来为其添加颜色和动画效果。同时，我们使用了一个简单的段落来表达我们的心意。你可以根据自己的需求和喜好来更改样式和内容。

阅读全文