教學–純CSS寫的撞擊點圖示!還會轉轉轉喔
撞擊標示圖是Amos利用通勤時一點點的時間擠出來的小範例,這個例子採用了兩種方式來撰寫,而兩種作法也都各有其優缺點,一個是採用了CSS3的圓形漸層,一個則是採用了CSS3的線性漸層與::before、::after這兩個擬類別來達成。
最近Amos實在忙到有點抽不出時間來寫點好玩的CSS例子,唯一能利用的時間只有在火車上通勤時的一點時光,之前Amos用CSS3寫了一個彩虹沙灘球,想想這樣的寫法應該可以有更多的範例可以發展才是,所以Amos利用了CSS3彩虹沙灘球的撰寫方式為基礎,小小修改了一些原始碼來達到撞擊標示圖的效果,現在就跟著Amos來看看吧。
方式一:使用CSS3圓形漸層
使用CSS3圓形漸層之前,當然先要建立基本的圓形,所以我們先使用CSS3的圓角border-radius屬性來製作一個圓形區塊。
接著使用CSS3的backgeound-size設定背景尺寸為四分之一區塊大小,並且利用背景定位來預先設定後續要產出的四個背景圖的位置,分別是左上、右上、右下、左下。
然後就是利用CSS3的多重背景功能來製作四張圓形漸層圖片啦,而四張圓形漸層圖片的角度恰好都要從區塊圓心開始,往外放射狀的展現漸層色彩,而為了讓圓形的感覺不致於太過發散,Amos加上了一點邊框讓整體感覺更好一點,不會有沒有邊邊的感覺,馬上來看看原始碼囉~
.strike{ width:100px; height:100px; margin:auto; border:6px solid #333; border-radius:50%; background-size:50px 50px; background-repeat:no-repeat; background-position:left top,right top,right bottom,left bottom; background-image: -moz-radial-gradient(50px 50px, circle farthest-side, rgba(255,205,0,1) 70%,rgba(255,255,160,1) 95%), -moz-radial-gradient(0px 50px, circle farthest-side,rgba(0,0,0,1) 70%,rgba(80,80,80,1) 95%), -moz-radial-gradient(0px 0px, circle farthest-side,rgba(255,205,0,1) 70%,rgba(255,255,160,1) 95%), -moz-radial-gradient(50px 0px, circle farthest-side,rgba(0,0,0,1) 70%, rgba(80,80,80,1) 95%); background-image: -webkit-radial-gradient(50px 50px, circle farthest-side, rgba(255,205,0,1) 70%,rgba(255,255,160,1) 95%), -webkit-radial-gradient(0px 50px, circle farthest-side,rgba(0,0,0,1) 70%,rgba(80,80,80,1) 95%), -webkit-radial-gradient(0px 0px, circle farthest-side,rgba(255,205,0,1) 70%,rgba(255,255,160,1) 95%), -webkit-radial-gradient(50px 0px, circle farthest-side,rgba(0,0,0,1) 70%, rgba(80,80,80,1) 95%); box-shadow:0 0 5px #FFFFFF;}
方式二:使用線性漸層搭配::before、::after擬類別
若是您不懂::before與::after的話,建議您可以先看看「使用::before 與 ::after來製作可列印的logo圖片」這篇文章先有個概念。此第二種方式相同採用了CSS3多重背景的功能,首先先給予背景一個色彩設定,接下來設定背景圖片尺寸為四分之一區塊大小,再將背景做定位後給予漸層色彩即可。
繼續我們使用::before擬類別來製作光暈效果,先利用::before建立一個空的區塊屬性物件,將定位設定在父層物件左上角,接著使用box-shadow搭配rgba的色彩設定即可完成啦~一樣讓我們來看看原始碼囉~
.strike2{ width:100px; height:100px; margin:auto; border:6px solid #333; border-radius:50%; background-color:rgba(255,205,0,1); background-size:50px 50px; background-repeat:no-repeat; background-position:left top,right bottom; background-image:-moz-linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%),-moz-linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%); background-image:-webkit-linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%),-webkit-linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%); box-shadow:0 0 5px #FFF; position:relative;} .strike2::before{ content:""; width:100%; height:100%; border-radius:50%; position:absolute; left:0; top:0; box-shadow:inset 0 0 10px rgba(255,255,255,.5), inset 0 0 20px rgba(255,255,255,.5), inset 0 0 25px rgba(255,255,255,.5);}
來看看完成的畫面吧^^,若有更好的設計方式也請各位不吝分享喔~(話說有沒有人發現哪裡怪怪的?)
1 Comment
[…] CSS3中有許多迷人的功能,讓我們可以非常自由且彈性的設計我們的頁面區塊,其中Multiple background image就是一個非常吸引人的功能,不僅便利、彈性、省Code外,還能發揮更多的設計變化,上一次的「使用CSS3輕鬆寫出MAC彩虹球效果」以及「純CSS寫的撞擊點圖示!」其實也都是CSS3的Multiple background image功能,而這一次Amos更是好好玩了一下CSS3 Multiple background image功能,將CSS3的Gradient功能加進來一起使用,製作了九龍珠九顆神奇寶貝球,不多說,先來看看效果吧。在下方是實際呈現的效果 […]