首页用html写一个可以满屏跳动的爱心

用html写一个可以满屏跳动的爱心

时间: 2023-08-23 07:06:56 浏览: 112

好的，以下是可以实现你要求的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>满屏跳动的爱心</title> <style> body { overflow: hidden; } .heart { position: absolute; transform: rotate(-45deg); background-color: red; width: 20px; height: 20px; top: 0; animation: jump 1s ease-in-out infinite alternate; } @keyframes jump { 0% { top: 0; height: 20px; width: 20px; } 100% { top: 100%; height: 40px; width: 40px; } } </style> </head> <body>  <div class="heart" style="left: 50%;"></div> <div class="heart" style="left: 70%; top: 10%;"></div> <div class="heart" style="left: 30%; top: 20%;"></div> <div class="heart" style="left: 10%; top: 30%;"></div> <div class="heart" style="left: 90%; top: 40%;"></div> <div class="heart" style="left: 50%; top: 50%;"></div> <div class="heart" style="left: 30%; top: 60%;"></div> <div class="heart" style="left: 70%; top: 70%;"></div> <div class="heart" style="left: 10%; top: 80%;"></div> <div class="heart" style="left: 90%; top: 90%;"></div> </body> </html> ``` 这段代码会生成多个满屏跳动的爱心，每个爱心都会在页面上不停地跳动，直到页面被关闭。你可以复制上述代码，保存为HTML文件，然后在浏览器中打开它，即可看到效果。希望这能满足你的需求！

阅读全文