鏤空球體是一種非常炫酷的網頁元素,可以為頁面增加視覺上的趣味性。在網頁中實現這個效果需要用到CSS技術,下面介紹如何實現鏤空球體。
.ball { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #f2f2f2; } .ball:before { content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background-color: #fff; border-radius: 50%; z-index: 1; } .ball:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background-color: #f2f2f2; z-index: 2; }
首先,我們需要創建一個空心的圓球體。CSS中border-radius屬性可以實現圓形樣式,將其設置為50%即可創建一個圓形的div。我們命名這個div為.ball。
接下來,我們需要在.ball里面創建兩個偽元素:before和:after。其中:before元素的作用是實現一個白色的內圓,使得球體的中心部分呈現為空心的效果,這樣球體的外殼就出現了。而:after元素是用來創建球體的充實效果。
在:before元素中,我們設置content屬性為空,使其成為一個空元素,然后把它的position屬性設置為絕對定位。同時,將top、left、right、bottom屬性設置為-20px,使此元素比ball小20px,形成觀感上的內凹效果。 border-radius也要設置為50%。
緊接著,在:after元素中,首先將其也設置為絕對定位。然后,將top和left屬性都設為50%,這樣可以將圓球體的中心定位在整個網頁的中心位置。后面的transform: translate(-50%, -50%)則可以將其整個元素向左上方移動50%的寬度和高度,讓其在中心的效果更為明顯。width和height屬性設置充實的球體的大小,同時border-radius也是要設置為50%以保證形狀的圓潤程度。background-color可以設置成和ball相同的顏色。
到了這里,我們差不多就已經實現了一個很酷的鏤空球體效果了。你還可以進一步將.ball元素設置為動態的,實現小球運動的效果,讓頁面更加生動有趣。