首页html制作爱心表白代码(卡通人物爱心表白-爱心形状浮动特效 )备

html制作爱心表白代码(卡通人物爱心表白-爱心形状浮动特效 )备

时间: 2023-09-26 20:13:33 浏览: 130

以下是一个简单的 HTML 爱心表白代码，包含了卡通人物和爱心形状浮动特效： ```html <!DOCTYPE html> <html> <head> <title>卡通人物爱心表白</title> <style> body { background-color: #FBEFF2; } #heart { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; background-color: #FFB6C1; transform: rotate(-45deg); animation: heart-float 1s ease-in-out infinite; } #character { position: absolute; top: 50%; left: 50%; margin-top: -80px; margin-left: -80px; width: 160px; height: 160px; background-image: url('https://i.imgur.com/Kb7XeQF.png'); background-size: cover; animation: character-bounce 1s ease-in-out infinite; } @keyframes heart-float { 0% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(0, 10px); } 100% { transform: rotate(-45deg) translate(0, 0); } } @keyframes character-bounce { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 10px); } 100% { transform: translate(0, 0); } } </style> </head> <body> <div id="heart"></div> <div id="character"></div> <h1 style="text-align: center; margin-top: 50px;">我爱你！</h1> </body> </html> ``` 你可以将这些代码复制到一个新的 HTML 文件中，并用浏览器打开它。请注意，此代码中的背景图片链接可能会失效，请根据需要替换为自己的图片链接。

阅读全文