用HTML输出泡泡动态页面
时间: 2024-05-11 19:17:04 浏览: 11
好的,以下是一个简单的泡泡动态页面的示例代码,使用 HTML、CSS 和 JavaScript 实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>Bubble Page</title>
<style>
body {
background-color: #f4f4f4;
}
.bubble {
position: absolute;
border-radius: 50%;
background-color: #4CAF50;
animation: bubble 3s ease-in-out infinite;
}
@keyframes bubble {
0% {
transform: translate(0, 0);
opacity: 1;
}
50% {
transform: translate(0, -50px);
opacity: 0.5;
}
100% {
transform: translate(0, -100px);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
// 创建泡泡
function createBubble() {
const bubble = document.createElement('div');
bubble.classList.add('bubble');
bubble.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(bubble);
// 删除泡泡
setTimeout(() => {
bubble.remove();
}, 3000);
}
// 每隔一秒创建一个泡泡
setInterval(createBubble, 1000);
</script>
</body>
</html>
```
这段代码会在页面上创建一些随机位置的泡泡,每个泡泡会向上漂浮并逐渐消失。你可以在浏览器中运行此代码,查看效果。
相关推荐
![apk](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)