首页HTML满屏漂浮爱心

HTML满屏漂浮爱心

时间: 2024-06-30 21:00:39 浏览: 162

HTML动态爱心代码爱心满屏

5星 · 资源好评率100%

HTML动态爱心代码满屏爱心免费下载

HTML和CSS可以结合使用来创建满屏漂浮的心形元素。以下是一个简单的示例，使用纯CSS创建一个全屏背景的爱心，并让它在页面上浮动： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: rgba(255, 0, 0, 0.5); /* 淡红色背景以便于爱心显示 */ } .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; /* 根据需要调整尺寸 */ height: 200px; background: red; /* 心形颜色 */ border-radius: 50% 50% 50% 0; /* 创建爱心形状 */ animation: float 3s infinite ease-in-out; /* 动画效果 */ } @keyframes float { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -60%); } 100% { transform: translate(-50%, -50%); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 在这个例子中，`.heart` 类的元素会漂浮在屏幕中心，不断上下移动，模仿一个动态的漂浮效果。你可以根据需要调整背景颜色、尺寸和动画参数。

阅读全文