整理文件時翻出一個好久前做的泡泡屏保的特效，純JS+CSS做的。回想了下，是去年年初時看見XP下那個流行的泡泡屏保，突然想移植到JS版本來。但有做著才發(fā)現(xiàn)有不少麻煩的問題解決不好，于是沒繼續(xù)。

　　?

　　DEMO： https://www.etherdream.com/funnyscript/bubbles/? ?

　　

　　和XP系統(tǒng)自帶的那個屏保一樣，從屏幕一個角落里冒出很多泡泡，然后在屏幕里碰撞反彈。泡泡有著半透明的漸變色，并且顏色也是在不停的變換。

?　　

　　當(dāng)時這個效果分析了不少時間。如果是用flash那就再簡單不過了，把泡泡蒙板的灰色通道復(fù)制到一個純色的背景層的Alpha通道就可以了。但是網(wǎng)頁里除非用HTML5的canvas，單憑純粹的CSS還沒那么強(qiáng)大的位圖處理能力。在CSS里，和透明度有關(guān)的道具也只有這幾個：png圖片，css alpha值，rgba()，chroma濾鏡，mask濾鏡，AlphaImageLoader濾鏡，以及CSS3的漸變。

　　

　　

?

　　你也許會說，這不是很簡單，給png圖片層設(shè)置各種background-color，不就可以實(shí)現(xiàn)顏色的變換了嗎。事實(shí)上，背景色不但混合到了半透明像素中，連泡泡外的四個邊角也給填充了，這樣就成了方塊，而不是泡泡了，并且顏色也不正確。顯然沒有這么簡單。

　　

　　因?yàn)榕菖菔前胪该鳚u變的材質(zhì)，chroma和mask這些過濾單色的濾鏡都派不上用場。而rgba的背景色同樣也會出現(xiàn)多余的背景。 AlphaImageLoader濾鏡經(jīng)測試，實(shí)際顯示出來的圖片在background之上， 與<img>載入png效果一樣。而CSS3的漸變和本例的蒙板配合起來比較困難，而且兼容性也有問題。

?　　

　　本例的困難之處在于：圖片本身不僅是半透明漸變的，并且這些漸變點(diǎn)的顏色還能通過腳本改變。考慮了很久，既然沒有一個簡便的方法，那不如就用復(fù)雜的吧~

?

　　大家都知道，顏色都是RGB組成的，調(diào)整3種原色的比例，就可以變出各種顏色。我們不妨把灰色蒙板事先填入R,G,B三種純色，保存為3張圖片。這樣就有了100%的紅色泡泡，綠色泡泡，藍(lán)色泡泡。把他們疊在同個位置，然后給3張圖片設(shè)置不同的css alpha值，于是就有了各種顏色的泡泡，并且半透明的像素仍然保留！

　　

　　

?

　　 于是這個彩色的問題就解決了。不過值得注意的是，藍(lán)色位于最頂層，而紅色則是最底層。即使是紅色層100%的不透明，也會被藍(lán)色和綠色層的PNG層層剝削，很明顯的減淡。所以實(shí)際顯示時，還需給藍(lán)和綠層分別加個權(quán)值，以保證紅色通道不會那么的微弱，而藍(lán)的那么的明顯。不過在IE里的顯示效果仍是藍(lán)色很明顯，不知道IE的透明度計(jì)算方式和標(biāo)準(zhǔn)瀏覽器有什么不同。。。 (2010/2/1)

?

　　后續(xù)：當(dāng)時對ie的mask濾鏡理解不對，mask濾鏡并非是單色的過濾，而是：用指定的RGB顏色替換容器內(nèi)所有點(diǎn)的RGB，并且Alpha'=255 - Alpha。所以ie下只要把蒙板圖片的Alpha通道取反，然后同時用AlphaImageLoader和Mask濾鏡，即可達(dá)到效果，Mask濾鏡的color參數(shù)就是泡泡的顏色。另在Webkit內(nèi)核的瀏覽器下，可以使用-webkit-mask-image直接應(yīng)用一個圖片蒙板！（2011/11/10）

總結(jié)

以上是生活随笔為你收集整理的【分享】翻出过去的一个多彩泡泡屏保特效(JS+CSS版)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。