使用CSS3輕鬆寫出MAC彩虹球效果
說到MAC彩虹球(MAC Beach ball),就是MAC在忙碌時會出現的那顆彩球,Amos一直都覺得他比Windows的漏斗或是轉圈圈好看多了,只是以往要製作出這樣的彩色球,除了使用GIF圖片製作這個方法外,大概就無解了,某天Amos看到國外有人使用了CSS3的語法來寫出類似的效果,但Amos覺得有些小複雜,HTML原始碼也稍微有些多,於是想到~能不能改用更簡單的HTML Code並搭配其他的CSS3寫法來達到這樣的效果呢?思索了一下,利用今天火車上通勤的時間寫了這個例子,希望大家會喜歡。
準備HTML原始碼並設定基本CSS定位
一開始想說既然要乾淨一點,那就使用一個div來做好了,不過若是還要製作反光的話,那可能會需要兩個DIV會比較方便一點
<div class="load"> <div class="light"></div> <div class="ball"></div> </div>
用CSS將load區塊定位
body{ background-color:#222;} .load{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:50px; height:50px; border-radius:50%; box-shadow:0 0 10px rgba(0,0,0,.5);}
利用CSS3 漸層製作色塊
在這邊我們利用了CSS3的多重背景方式(multiple background)並搭配背景尺寸(background-size)來製作Beach Ball彩球的每個色彩
.ball{ width:100%; height:100%; border-radius:50%; background-size:50% 50%; background-position: left top,left top,left top, right top,right top,right top, right bottom,right bottom,right bottom, left bottom,left bottom,left bottom; background-repeat:no-repeat; background-image: -moz-linear-gradient(60deg, #ff0000 36%,rgba(255,0,0,0) 36% ), -moz-linear-gradient(30deg, #ff8000 64%,rgba(255,128,0,0) 64% ), -moz-linear-gradient(0deg, #ffff00 100%,rgba(255,255,0,0) 100% ), -moz-linear-gradient(-30deg, #80ff00 36%,rgba(128,255,0,0) 36%), -moz-linear-gradient(-60deg, #00ff80 64%,rgba(0,255,128,0) 64% ), -moz-linear-gradient(0deg, #00ffff 100%,rgba(0,255,255,0) 100% ), -moz-linear-gradient(-120deg, #3097ff 36%,rgba(48,151,255,0) 36%), -moz-linear-gradient(-150deg, #3071ff 64%,rgba(48,113,255,0) 64% ), -moz-linear-gradient(0deg, #3e30ff 100%,rgba(62,48,128,0) 100% ), -moz-linear-gradient(150deg, #5f3b9d 36%,rgba(95,59,157,0) 36% ), -moz-linear-gradient(120deg, #803198 64%,rgba(128,49,152,0) 64% ), -moz-linear-gradient(0deg, #ff0080 100%,rgba(255,0,128,0) 100% ); background-image: -webkit-linear-gradient(60deg, #ff0000 36%,rgba(255,0,0,0) 36% ), -webkit-linear-gradient(30deg, #ff8000 64%,rgba(255,128,0,0) 64% ), -webkit-linear-gradient(0deg, #ffff00 100%,rgba(255,255,0,0) 100% ), -webkit-linear-gradient(-30deg, #80ff00 36%,rgba(128,255,0,0) 36%), -webkit-linear-gradient(-60deg, #00ff80 64%,rgba(0,255,128,0) 64% ), -webkit-linear-gradient(0deg, #00ffff 100%,rgba(0,255,255,0) 100% ), -webkit-linear-gradient(-120deg, #3097ff 36%,rgba(48,151,255,0) 36%), -webkit-linear-gradient(-150deg, #3071ff 64%,rgba(48,113,255,0) 64% ), -webkit-linear-gradient(0deg, #3e30ff 100%,rgba(62,48,128,0) 100% ), -webkit-linear-gradient(150deg, #5f3b9d 36%,rgba(95,59,157,0) 36% ), -webkit-linear-gradient(120deg, #803198 64%,rgba(128,49,152,0) 64% ), -webkit-linear-gradient(0deg, #ff0080 100%,rgba(255,0,128,0) 100% ); -webkit-animation:mymy 1s infinite linear; -moz-animation:mymy 1s infinite linear; }
最後來加一點陰影增加一點層次,並且讓外圈的圓感覺更平順一點,若是少了這個,有時候在Firefox上面可能會看到有點鋸齒的感覺
.light{ position:absolute; z-index:3; width:104%; height:104%; left:-1%; top:-1%; border-radius:50%; box-shadow:inset 0 0 3px 1px rgba(0,0,0,.3);}
最後的最後~加上CSS3動畫語法讓他轉圈圈吧~
@-webkit-keyframes mymy{ 0%{ transform:rotate(0);} 100%{transform:rotate(360deg);} } @-moz-keyframes mymy{ 0%{ transform:rotate(0);} 100%{transform:rotate(360deg);} }
CSS總結說明
這個例子如果加上反光效果應該會更棒,但是因為需要花時間微調,所以Amos就偷懶了XDDDD,若各位想要加上反光效果的話,可以加在light區塊的CSS內,或者另外再製作一個區塊出來也可。而這個例子中,Amos使用到的是CSS3中超棒的多重背景CSS設定,並利用這種設定方式來設定背景尺寸,再搭配上背景的定位技巧來達到此效果,當然不可少的就是CSS3中新增的透明色彩RGBA的設定了,這樣要製作出MAC Beach Ball真的是簡單許多。不多說!立即就來看看實際的效果吧~MAC Beach Ball範例
2 Comments
[…] 最近Amos實在忙到有點抽不出時間來寫點好玩的CSS例子,唯一能利用的時間只有在火車上通勤時的一點時光,之前Amos用CSS3寫了一個彩虹沙灘球,想想這樣的寫法應該可以有更多的範例可以發展才是,所以Amos利用了CSS3彩虹沙灘球的撰寫方式為基礎,小小修改了一些原始碼來達到撞擊標示圖的效果,現在就跟著Amos來看看吧。 […]
[…] CSS3中有許多迷人的功能,讓我們可以非常自由且彈性的設計我們的頁面區塊,其中Multiple background image就是一個非常吸引人的功能,不僅便利、彈性、省Code外,還能發揮更多的設計變化,上一次的「使用CSS3輕鬆寫出MAC彩虹球效果」以及「純CSS寫的撞擊點圖示!」其實也都是CSS3的Multiple background image功能,而這一次Amos更是好好玩了一下CSS3 Multiple background image功能,將CSS3的Gradient功能加進來一起使用,製作了九龍珠九顆神奇寶貝球,不多說,先來看看效果吧。在下方是實際呈現的效果 […]