CSS設計屏保氣泡效果十分賞心悅目，下面是一份簡單的代碼示例：

html,body {
margin: 0;
padding: 0;
height: 100%;
}
body {
perspective: 600px;
transform-style: preserve-3d;
overflow: hidden;
}
.bubble {
position: absolute;
bottom: 0;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%,0) rotateY(0deg) translateZ(0);
animation: move 5s ease-out infinite;
}
.bubble::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 60px;
height: 60px;
background: rgba(255,255,255,0.9);
border-radius: 50%;
box-shadow: inset 0 2px 3px rgba(0,0,0,0.2),
0 3px 4px rgba(0,0,0,0.1),
2px 12px 9px rgba(0,0,0,0.05);
transform: translateZ(-60px);
}
@keyframes move {
0% {
transform: translate(-50%,0) rotateY(0deg) translateZ(0);
}
50% {
transform: translate(-50%,50%) rotateY(180deg) translateZ(120px);
}
100% {
transform: translate(-50%,0) rotateY(360deg) translateZ(0);
}
}

以上代碼主要主要是利用CSS3中的 perspective、transform、transition 和 animation 等屬性，實現氣泡在瀏覽器中飄動的效果。需要注意的是，瀏覽器支持的效果和屬性可能會有所不同，因此在使用時需注意對應的兼容性問題。

希望以上代碼能對需要實現類似效果的朋友提供一定幫助。