在網頁設計中，人們經常使用各種工具和技巧來使自己的網頁更具吸引力和美觀。最近，在設計頁面底部的時候，一種新型的動態泡泡效果被越來越多的人使用。這種效果可以讓頁面看起來更加生動有趣，同時也能增加頁面的互動性。

<style>
.bubble{
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: bubble 6s infinite;
-webkit-animation: bubble 6s infinite;
}
@keyframes bubble{
0%{
transform: translateY(0);
opacity: 1;
}
100%{
transform: translateY(-800px);
opacity: 0;
}
}
@-webkit-keyframes bubble{
0%{
transform: translateY(0);
opacity: 1;
}
100%{
transform: translateY(-800px);
opacity: 0;
}
}
</style>
<div class="bubble" style="left: 20%; bottom: -100px; width: 50px;height: 50px;"></div>
<div class="bubble" style="left: 50%; bottom: -100px; width: 80px;height: 80px;"></div>
<div class="bubble" style="left: 80%; bottom: -100px; width: 30px;height: 30px;"></div>

這些代碼通過CSS的動畫特性實現了泡泡的上下漂浮效果，同時還使用了透明度變化和位置變化等，使得泡泡看起來更加生動、有趣。而通過在頁面底部增加這些泡泡，還可以增加頁面的活力和趣味性，從而吸引更多的用戶。