html用css写彩虹,使用CSS3輕鬆寫出MAC彩虹球效果

使用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範例