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