【分享】翻出过去的一个多彩泡泡屏保特效(JS+CSS版)

　　整理文件时翻出一个好久前做的泡泡屏保的特效，纯JS+CSS做的。回想了下，是去年年初时看见XP下那个流行的泡泡屏保，突然想移植到JS版本来。但有做着才发现有不少麻烦的问题解决不好，于是没继续。

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

　　和XP系统自带的那个屏保一样，从屏幕一个角落里冒出很多泡泡，然后在屏幕里碰撞反弹。泡泡有着半透明的渐变色，并且颜色也是在不停的变换。

　　当时这个效果分析了不少时间。如果是用flash那就再简单不过了，把泡泡蒙板的灰色通道复制到一个纯色的背景层的Alpha通道就可以了。但是网页里除非用HTML5的canvas，单凭纯粹的CSS还没那么强大的位图处理能力。在CSS里，和透明度有关的道具也只有这几个：png图片，css alpha值，rgba()，chroma滤镜，mask滤镜，AlphaImageLoader滤镜，以及CSS3的渐变。

　　你也许会说，这不是很简单，给png图片层设置各种background-color，不就可以实现颜色的变换了吗。事实上，背景色不但混合到了半透明像素中，连泡泡外的四个边角也给填充了，这样就成了方块，而不是泡泡了，并且颜色也不正确。显然没有这么简单。

　　因为泡泡是半透明渐变的材质，chroma和mask这些过滤单色的滤镜都派不上用场。而rgba的背景色同样也会出现多余的背景。 AlphaImageLoader滤镜经测试，实际显示出来的图片在background之上，与<img>载入png效果一样。而CSS3的渐变和本例的蒙板配合起来比较困难，而且兼容性也有问题。

　　本例的困难之处在于：图片本身不仅是半透明渐变的，并且这些渐变点的颜色还能通过脚本改变。考虑了很久，既然没有一个简便的方法，那不如就用复杂的吧~

　　大家都知道，颜色都是RGB组成的，调整3种原色的比例，就可以变出各种颜色。我们不妨把灰色蒙板事先填入R,G,B三种纯色，保存为3张图片。这样就有了100%的红色泡泡，绿色泡泡，蓝色泡泡。把他们叠在同个位置，然后给3张图片设置不同的css alpha值，于是就有了各种颜色的泡泡，并且半透明的像素仍然保留！

　　于是这个彩色的问题就解决了。不过值得注意的是，蓝色位于最顶层，而红色则是最底层。即使是红色层100%的不透明，也会被蓝色和绿色层的PNG层层剥削，很明显的减淡。所以实际显示时，还需给蓝和绿层分别加个权值，以保证红色通道不会那么的微弱，而蓝的那么的明显。不过在IE里的显示效果仍是蓝色很明显，不知道IE的透明度计算方式和标准浏览器有什么不同。。。 (2010/2/1)

　　后续：当时对ie的mask滤镜理解不对，mask滤镜并非是单色的过滤，而是：用指定的RGB颜色替换容器内所有点的RGB，并且Alpha'=255 - Alpha。所以ie下只要把蒙板图片的Alpha通道取反，然后同时用AlphaImageLoader和Mask滤镜，即可达到效果，Mask滤镜的color参数就是泡泡的颜色。另在Webkit内核的浏览器下，可以使用-webkit-mask-image直接应用一个图片蒙板！（2011/11/10）

【分享】翻出过去的一个多彩泡泡屏保特效(JS+CSS版)相关推荐

用C++编写一个个性化的屏保程序，零基础小白可收藏学习！
C++编写一个个性化的屏保程序,这个屏幕保护程序模仿自一个著名杀毒软件中的待机画面,图标动态变化的屏保程序,进入屏保状态后,程序自动获取一些windows中所安装程序的ICO图标,随机显示一些图标,并 ...
android 日历翻页动画,datetimepicker一个不错的日历android特效
datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...
用python开发一个背单词软件-python实现屏保程序（适用于背单词）
今天要给大家分享的是一款自己写的屏保程序,大学大家最头疼的就是四六级的考试了,上次考试做阅读的时候,情不自禁的发呆,想着如果我能在电脑上写一个屏保程序,那么就可以天天记单词了! 开始首先:我们使用的 ...
From .1：从屏保到Win平台开发 - 一个可运行的C#屏保程序
有一天在微信里看见了微软的Fluent Design系统(腾讯翻译为浸流设计系统)界面设计的一张图片,觉得非常好看,顿时想,这么好看的界面,如果能是一个屏保该有多好.这样的话,用户坐在电脑前也不会忍心 ...
win10 SystemParametersInfo 设置屏保不好使_黑科技学：抖音最近很火的时间罗盘屏保出电脑版了，实在太帅了...
自古深情留不住,唯有套路存人心,大家好我是你们的黑科技老师木子李.今天小编想和大家分享一下最近很火的时间罗盘屏保,最近很多教程都是手机版,所以今天小编这出的是电脑版!动画效果那是相当的优秀.有什么需要 ...
小米8android版本点击3次,翻出古董小米3刷完安卓8.0，跑起来竟比MIUI9还快
原标题:翻出古董小米3刷完安卓8.0,跑起来竟比MIUI9还快说起古董的小米3手机,算是小米史上比较失败的作品,尤其是英伟达处理器的版本.小米3也是最短命的小米手机之一,迫使小米提前发布了小米4. ...
心血来潮，翻出《天空之城》的CD……最后还去重新下了无损压缩格式的
下午弄Oracle的时候,不知道是哪根筋搭错了竟然忽然想听宫崎骏的动画<天空之城>的OST 可因为很长时间没有听了,已经忘记具体放在什么地方 ◎◎ 没辙,排除法找吧先利用晾衣杆,铁棍等 ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
[转] linux下shell中使用上下键翻出历史命名时出现^[[A^[[A^[[A^[[B^[[B的问题解决,Linux使用退格键时出现^H解决方法
[转] linux下shell中使用上下键翻出历史命名时出现^[[A^[[A^[[A^[[B^[[B的问题解决,Linux使用退格键时出现^H解决方法参考文章: (1)[转] linux下shell ...
有 2*n 的一个长方形方格，用一个1*2 的骨牌铺满方格编写一个程序，试对给出的任意一个n(n0), 输出铺法总数。
有 2n 的一个长方形方格,用一个12 的骨牌铺满方格编写一个程序,试对给出的任意一个n(n>0), 输出铺法总数. [算法分析] (1)当n=1时, 只能是一种铺法,铺法总数有示为x1=1. ...

【分享】翻出过去的一个多彩泡泡屏保特效(JS+CSS版)

【分享】翻出过去的一个多彩泡泡屏保特效(JS+CSS版)相关推荐

最新文章

热门文章