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

MAC Beach ball

說到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;
	:50%;
	: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-(60deg, #ff0000 36%,rgba(255,0,0,0) 36% ),
		-moz-linear-(30deg, #ff8000 64%,rgba(255,128,0,0) 64% ),
		-moz-linear-(0deg, #ffff00 100%,rgba(255,255,0,0) 100% ),
		-moz-linear-(-30deg, #80ff00 36%,rgba(128,255,0,0) 36%),
		-moz-linear-(-60deg, #00ff80 64%,rgba(0,255,128,0) 64% ),
		-moz-linear-(0deg, #00ffff 100%,rgba(0,255,255,0) 100% ),
		-moz-linear-(-120deg, #3097ff 36%,rgba(48,151,255,0) 36%),
		-moz-linear-(-150deg, #3071ff 64%,rgba(48,113,255,0) 64% ),
		-moz-linear-(0deg, #3e30ff 100%,rgba(62,48,128,0) 100% ),
		-moz-linear-(150deg, #5f3b9d 36%,rgba(95,59,157,0) 36% ),
		-moz-linear-(120deg, #803198 64%,rgba(128,49,152,0) 64% ),
		-moz-linear-(0deg, #ff0080 100%,rgba(255,0,128,0) 100% );
	background-image:
		-webkit-linear-(60deg, #ff0000 36%,rgba(255,0,0,0) 36% ),
		-webkit-linear-(30deg, #ff8000 64%,rgba(255,128,0,0) 64% ),
		-webkit-linear-(0deg, #ffff00 100%,rgba(255,255,0,0) 100% ),
		-webkit-linear-(-30deg, #80ff00 36%,rgba(128,255,0,0) 36%),
		-webkit-linear-(-60deg, #00ff80 64%,rgba(0,255,128,0) 64% ),
		-webkit-linear-(0deg, #00ffff 100%,rgba(0,255,255,0) 100% ),
		-webkit-linear-(-120deg, #3097ff 36%,rgba(48,151,255,0) 36%),
		-webkit-linear-(-150deg, #3071ff 64%,rgba(48,113,255,0) 64% ),
		-webkit-linear-(0deg, #3e30ff 100%,rgba(62,48,128,0) 100% ),
		-webkit-linear-(150deg, #5f3b9d 36%,rgba(95,59,157,0) 36% ),
		-webkit-linear-(120deg, #803198 64%,rgba(128,49,152,0) 64% ),
		-webkit-linear-(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範例