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

　　?

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

　　

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

?　　

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

　　

　　

?

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

　　

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

?　　

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

?

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

　　

　　

?

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

?

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

總結(jié)

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

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