使用CSS3輕鬆寫出MAC彩虹球效果

MAC Beach ball

說到MAC彩虹球(MAC Beach ball),就是MAC在忙碌時會出現的那顆彩球,Amos一直都覺得他比Windows的漏斗或是轉圈圈好看多了,只是以往要製作出這樣的彩色球,除了使用GIF圖片製作這個方法外,大概就無解了,某天Amos看到國外有人使用了CSS3的語法來寫出類似的效果,但Amos覺得有些小複雜,HTML原始碼也稍微有些多,於是想到~能不能改用更簡單的HTML Code並搭配其他的CSS3寫法來達到這樣的效果呢?思索了一下,利用今天火車上通勤的時間寫了這個例子,希望大家會喜歡。

準備HTML原始碼並設定基本CSS定位

一開始想說既然要乾淨一點,那就使用一個div來做好了,不過若是還要製作反光的話,那可能會需要兩個DIV會比較方便一點

用CSS將load區塊定位

 利用CSS3 漸層製作色塊

在這邊我們利用了CSS3的多重背景方式(multiple background)並搭配背景尺寸(background-size)來製作Beach Ball彩球的每個色彩

最後來加一點陰影增加一點層次,並且讓外圈的圓感覺更平順一點,若是少了這個,有時候在Firefox上面可能會看到有點鋸齒的感覺

最後的最後~加上CSS3動畫語法讓他轉圈圈吧~

 CSS總結說明

這個例子如果加上反光效果應該會更棒,但是因為需要花時間微調,所以Amos就偷懶了XDDDD,若各位想要加上反光效果的話,可以加在light區塊的CSS內,或者另外再製作一個區塊出來也可。而這個例子中,Amos使用到的是CSS3中超棒的多重背景CSS設定,並利用這種設定方式來設定背景尺寸,再搭配上背景的定位技巧來達到此效果,當然不可少的就是CSS3中新增的透明色彩RGBA的設定了,這樣要製作出MAC Beach Ball真的是簡單許多。不多說!立即就來看看實際的效果吧~MAC Beach Ball範例