CSS球體光亮效果是一種常見的網頁特效,其可以營造出逼真的球體效果,讓網站更加炫酷。本篇文章將介紹如何使用CSS制作球體光亮效果。
/* CSS代碼開始 */ .ball{ width: 100px; height: 100px; border-radius: 50%; background-color: #aaa; position: relative; box-shadow: 0 0 20px #fff; } .ball:before{ content: ''; width: 100%; height: 100%; display: block; border-radius: inherit; position: absolute; top: 0; left: 0; background-image: radial-gradient(#fff, transparent); } /* CSS代碼結束 */
首先,我們要創建一個球形的div,使用border-radius屬性設置圓角半徑為50%即可。同時設置其寬高為100px,background-color為#aaa,這樣球體的基本顏色就完成了。接下來,我們為球體添加陰影效果,使用box-shadow屬性設置,這樣可以讓球體看起來更加立體。
然后我們再給球體添加一個偽元素:before,我們給其設置和父元素一樣的圓角半徑,然后將其定位到父元素的最上層,這樣就可以營造出光亮效果。我們為其設置漸變背景色,讓其由白色逐漸向透明變化,這樣就可以讓球體看起來更加真實。
最終的球體光亮效果如下所示:
通過簡單的CSS代碼,我們就可以實現一個逼真的球體光亮效果,讓網站更加炫酷。