HTML5氣泡飄動網頁是一種很有趣的網頁設計，它能讓網頁看起來更加生動有趣。我們可以通過CSS和JavaScript來實現這種網頁設計。
以下是一個基礎的HTML5氣泡飄動代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>氣泡飄動網頁</title>
<style>
.bubble {
position: absolute;
width: 40px;
height: 40px;
background-color: #FFF;
border-radius: 20px;
opacity: 0.8;
box-shadow: 0 0 20px #FFF;
}
</style>
</head>
<body>
<script>
var bubbles = [];
function Bubble(x, y) {
this.x = x;
this.y = y;
this.element = document.createElement('div');
this.element.className = 'bubble';
document.body.appendChild(this.element);
this.update = function() {
this.y--;
this.element.style.top = this.y + 'px';
}
this.destroy = function() {
document.body.removeChild(this.element);
}
}
function createBubble() {
var x = Math.floor(Math.random() * window.innerWidth);
var bubble = new Bubble(x, window.innerHeight);
bubbles.push(bubble);
}
function updateBubbles() {
for(var i=0; i<bubbles.length; i++) {
bubbles[i].update();
if(bubbles[i].y <= 0) {
bubbles[i].destroy();
bubbles.splice(i, 1);
}
}
}
setInterval(createBubble, 300);
setInterval(updateBubbles, 10);
</script>
</body>
</html>代碼中，我們定義了一個Bubble對象，它代表氣泡。通過DOM操作，我們在body元素中創建氣泡，并在update函數中移動氣泡到上方。通過setInterval函數，我們每隔一段時間就創建一個氣泡，并更新所有氣泡的位置。當氣泡移出屏幕時，我們就銷毀它。
如果你想讓氣泡有不同的大小、顏色或速度，可以在CSS或JavaScript中進行修改，讓每個氣泡都有自己獨特的特點。