教學–純CSS寫的撞擊點圖示!還會轉轉轉喔

strike

撞擊標示圖是Amos利用通勤時一點點的時間擠出來的小範例,這個例子採用了兩種方式來撰寫,而兩種作法也都各有其優缺點,一個是採用了CSS3的圓形漸層,一個則是採用了CSS3的線性漸層與::before、::after這兩個擬類別來達成。

最近Amos實在忙到有點抽不出時間來寫點好玩的CSS例子,唯一能利用的時間只有在火車上通勤時的一點時光,之前Amos用CSS3寫了一個彩虹沙灘球,想想這樣的寫法應該可以有更多的範例可以發展才是,所以Amos利用了CSS3彩虹沙灘球的撰寫方式為基礎,小小修改了一些原始碼來達到撞擊標示圖的效果,現在就跟著Amos來看看吧。

方式一:使用CSS3圓形漸層

使用CSS3圓形漸層之前,當然先要建立基本的圓形,所以我們先使用CSS3的圓角border-radius屬性來製作一個圓形區塊。

接著使用CSS3的backgeound-size設定背景尺寸為四分之一區塊大小,並且利用背景定位來預先設定後續要產出的四個背景圖的位置,分別是左上、右上、右下、左下。

然後就是利用CSS3的多重背景功能來製作四張圓形漸層圖片啦,而四張圓形漸層圖片的角度恰好都要從區塊圓心開始,往外放射狀的展現漸層色彩,而為了讓圓形的感覺不致於太過發散,Amos加上了一點邊框讓整體感覺更好一點,不會有沒有邊邊的感覺,馬上來看看原始碼囉~

 

方式二:使用線性漸層搭配::before、::after擬類別

若是您不懂::before與::after的話,建議您可以先看看「使用::before 與 ::after來製作可列印的logo圖片」這篇文章先有個概念。此第二種方式相同採用了CSS3多重背景的功能,首先先給予背景一個色彩設定,接下來設定背景圖片尺寸為四分之一區塊大小,再將背景做定位後給予漸層色彩即可。

繼續我們使用::before擬類別來製作光暈效果,先利用::before建立一個空的區塊屬性物件,將定位設定在父層物件左上角,接著使用box-shadow搭配rgba的色彩設定即可完成啦~一樣讓我們來看看原始碼囉~

來看看完成的畫面吧^^,若有更好的設計方式也請各位不吝分享喔~(話說有沒有人發現哪裡怪怪的?)