CSS3流量球是一種動態美觀的網頁元素，可以用來展示數據或進度條等信息。流量球的實現依靠CSS3中的偽元素和動畫效果，讓網頁看起來更加生動、有趣。

.ball {
width: 50px;
height: 50px;
position: relative;
border-radius:50%;
background: rgb(249, 252, 253);
overflow: hidden;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.inner-ball {
width: 100%;
height: 100%;
position: absolute;
}
.inner-ball:before {
content: "";
display: block;
width: 50%;
height: 100%;
background-color: #70e1f5;
transform: skew(45deg);
animation: left 2s cubic-bezier(.51,.19,.65,.83) infinite;
}
.inner-ball:after {
content: "";
display: block;
width: 50%;
height: 100%;
background-color: #70e1f5;
transform: skew(-45deg);
animation: right 2s cubic-bezier(.51,.19,.65,.83) infinite;
}
@keyframes left {
0% {
transform: skew(45deg) scale(1);
}
50% {
transform: skew(45deg) scale(1.5);
}
100% {
transform: skew(45deg) scale(1);
}
}
@keyframes right {
0% {
transform: skew(-45deg) scale(1);
}
50% {
transform: skew(-45deg) scale(1.5);
}
100% {
transform: skew(-45deg) scale(1);
}
}

在上述代碼中，.ball是流量球的最外層容器，.inner-ball是實際造型的內部元素。實現效果主要依靠偽元素:before和:after，通過動畫效果實現流動的效果?？梢酝ㄟ^修改顏色和動畫時間等屬性來改變流量球的外觀。