首页html 动画表白

html 动画表白

时间: 2023-07-01 18:06:13 浏览: 189

很好呀，以下是一个简单的HTML动画表白示例，你可以根据自己的需求进行修改： ```html <!DOCTYPE html> <html> <head> <title>动画表白</title> <style> body { background-color: #f9f6f7; font-family: Arial, sans-serif; } .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 90px; background-color: #e74c3c; border-radius: 50px 50px 0 0; animation: heartbeat 0.8s ease-in-out infinite; } .heart:before, .heart:after { content: ""; position: absolute; background-color: inherit; border-radius: 50%; } .heart:before { width: 100px; height: 100px; top: -50px; left: 0; } .heart:after { width: 100px; height: 100px; top: 0; left: 50px; } @keyframes heartbeat { 0% { transform: scale(0.75); } 20% { transform: scale(1); } 40% { transform: scale(0.75); } 60% { transform: scale(1); } 80% { transform: scale(0.75); } 100% { transform: scale(0.75); } } .text { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); color: #e74c3c; text-align: center; font-size: 36px; font-weight: bold; animation: blink 1s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body> <div class="heart"></div> <div class="text">我爱你！</div> </body> </html> ``` 这个示例中的动画是一个心形图案，不断跳动，并且显示一段闪烁的文字“我爱你！”。你可以将其中的文字修改为你自己想表达的话语，或者修改样式来添加其他元素。

阅读全文