精靈球是口袋妖怪游戲中非常經典的元素，它們是訓練師們用來捕捉小精靈的工具，其中最經典的就是皮卡丘所在的電系精靈球。本文將介紹如何用CSS畫出一個漂亮的電系精靈球。

.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, #fff 25%, #c5c5c5 26%, #c5c5c5 50%, #747474 50%, #747474 75%, #242424 75%);
position: relative;
}
.ball::before {
content: '';
position: absolute;
top: calc(50% - 10px);
left: calc(50% - 10px);
width: 20px;
height: 20px;
border-radius: 50%;
background: #00c0ff;
border: 2px solid #fff;
z-index: 1;
}
.ball::after {
content: '';
position: absolute;
top: calc(50% - 2px);
left: calc(50% - 40px);
width: 0;
height: 0;
border-top: 37px solid transparent;
border-left: 40px solid #fff;
border-bottom: 37px solid transparent;
}
.ball:hover {
box-shadow: 0 0 10px 10px #00c0ff;
}

我們首先給精靈球一個圓形的樣式，過渡顏色用來讓球看上去更加立體。然后，我們通過偽元素的方式添加了一個小的圓形來模擬精靈球中的電擊效果，再添加一個三角形來表示精靈球的開口。最后，我們為球添加了一個懸浮效果，當鼠標放在球上時，就會出現一個漂亮的深海藍色光芒。

這就是一個簡單而實用的精靈球樣式。你可以在其他的精靈球顏色上修改我們的樣式代碼，甚至可以通過JS將其與其他元素進行交互，例如讓它變成一個可點擊的按鈕等等。以上就是用CSS畫出一個漂亮的電系精靈球的教程，希望對你有所幫助。