首页爱心跑马灯全屏html页面制作

爱心跑马灯全屏html页面制作

时间: 2023-11-24 18:41:04 浏览: 39

你可以使用HTML和CSS来制作一个爱心跑马灯全屏页面。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>爱心跑马灯全屏页面</title> <style> body { margin: 0; padding: 0; overflow: hidden; } .marquee { position: relative; width: 100%; height: 100vh; animation: marquee 20s linear infinite; } .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: red; border-radius: 50%; animation: heartBeat 1s linear infinite; } @keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes heartBeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </head> <body> <div class="marquee"> <div class="heart"></div> </div> </body> </html> ``` 这个代码会创建一个全屏的跑马灯效果，爱心会从右边滚动到左边，并且爱心会周期性地放大和缩小。你可以根据需要调整爱心的大小和动画时间。