首页如何用hbuilderx做一个动态的爱心网页

如何用hbuilderx做一个动态的爱心网页

时间: 2023-11-23 07:06:24 浏览: 434

你可以使用 HTML、CSS 和 JavaScript 来制作一个动态的爱心网页。以下是一个简单的示例： 1. 在 HBuilderX 中创建一个新的 HTML 文件，将以下代码复制到文件中： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态爱心网页</title> <style> body { background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; } .heart { position: relative; width: 100px; height: 90px; transform: rotate(-45deg); background: linear-gradient(-45deg, #ff7b7b, #ff4646); animation: pulse 1.5s ease-in-out infinite; } .heart::before, .heart::after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: linear-gradient(-45deg, #ff7b7b, #ff4646); border-radius: 50px 50px 0 0; } .heart::after { left: 0; border-radius: 0 0 50px 50px; transform: rotate(90deg); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> <script> function createHeart() { const heart = document.createElement("div"); heart.classList.add("heart"); heart.style.left = Math.random() * window.innerWidth + "px"; heart.style.animationDuration = Math.random() * 2 + 3 + "s"; document.body.appendChild(heart); setTimeout(() => { heart.remove(); }, 5000); } setInterval(createHeart, 300); </script> </body> </html> ``` 2. 运行代码，你会看到一个居中显示的动态爱心网页。每隔300毫秒，会随机在页面上生成一个爱心，其大小、位置和动画时长也是随机的。每个爱心会在5秒后自动消失。你可以根据需要调整代码中的样式和参数，以实现更加符合你要求的效果。

阅读全文