CSS是一種用于網頁排版的樣式表語言，它可以控制網頁的布局、字體、顏色、大小等各種樣式，其中一項常用的效果就是鼠標經過圖標滾動。

.icon {
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.icon:hover .ball {
animation: ball-roll 1s ease-in-out;
}
.ball {
width: 50px;
height: 50px;
background-color: #ffaa00;
border-radius: 50%;
position: absolute;
top: -140px;
left: -10px;
animation: ball-fall 1s ease-in-out infinite;
}
@keyframes ball-fall {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 140px);
}
100% {
transform: translate(0, 0);
}
}
@keyframes ball-roll {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

如上所示，我們可以使用CSS中的:hover偽類和動畫效果實現鼠標經過圖標時，球體從圖標中滾出的效果。具體而言，我們首先定義一個圓形的icon，設置其大小、背景色和圓角，同時設置其為相對定位并開啟溢出隱藏。接著，在其內部添加一個同樣大小、背景色為橙色的球體ball，將其位置設置在icon的上方，即top值為-140px，left值為-10px，并為其添加一個沿著y軸方向無限動畫滾落的效果（ball-fall）。最后，在icon:hover狀態下為ball添加一個沿著z軸方向旋轉360度的動畫效果（ball-roll），使其像是從icon內部滾出。

通過這樣簡單的CSS樣式設置，我們就成功實現了一個令人驚嘆的鼠標經過圖標滾蛋效果。當然，這只是CSS中一項比較基礎的技巧，還有很多更加復雜、花哨的效果等待著我們去探索和嘗試。