Css - IE 滤镜使用特效

397 阅读3分钟

使用过IE6-10,开发过程中有很多浏览器之间的兼容问题,幸运的是,在任何版本中的浏览器,都有提供相关的解决方案。

今天我们来看看IE中的魔法滤镜,它可以让你的页面更酷炫。

界面滤镜:

AlphaImageLoader //图片处理滤镜

Gradient //渐变滤镜

静态滤镜:

Alpha //透明滤镜

BasicImage //色彩、图像旋转、透明滤镜

Blur //模糊滤镜

Chroma //颜色透明滤镜,不支持8~24位图片

Compositor //色彩混合滤镜

DropShadow //阴影滤镜

Emboss //浮雕滤镜

Engrave //灰度浮雕滤镜

Glow //外轮廓滤镜

Light //光照滤镜

MaskFilter //透明像素遮罩滤镜

Matrix //矩阵变换滤镜

MotionBlur //动感模糊滤镜

Shadow //内阴影滤镜

Wave //波纹滤镜

ICMFilter //颜色检索滤镜。

Gray //灰度滤镜

Invert //反相滤镜

Xray //X光滤镜

FlipH //水平翻转滤镜

FlipV //垂直翻转滤镜

转换滤镜

Barn //开关门滤镜

BlendTrans //渐隐滤镜, 配合BasicImage效率更高。

Blinds //百叶窗滤镜

CheckerBoard //象棋网格滤镜

Fade //渐隐滤镜

GradientWipe //线性滚动渐隐效果。

Inset //对角扩张效果滤镜

Iris //剪切轮廓扩张或收缩滤镜

Pixelate //色块拼贴滤镜

RadialWipe //放射状擦除滤镜

RandomBars //随机线条滤镜

RandomDissolve //随机像素溶解滤镜

RevealTrans //转换滤镜

Slide //滑条抽离滤镜

Spiral //矩形螺旋滤镜

Stretch //拉伸变形滤镜

Strips //锯齿边覆盖滤镜

Wheel //风车叶轮旋转滤镜

Zigzag //擦地板滤镜

我们来看看实际效果:

以上是静太滤镜的效果,动态滤镜较为复杂。

动态滤镜在IE中是一种幻灯片的方式进行的,可以达到很别具一格的效果,在页面中head标签中加入:

其中 http-equiv可以取值:”Site-Enter” , “Site-Exit” , “Page-Exit” , “Page-Enter”等分别表示进入页面或退出页面时的事件。blendTrans是一种动态滤镜效果,其中参数Duration是该动态效果的持续时间(单位:秒) ,Transition是过滤类型。

过滤类型:

0 矩形缩小 1 矩形扩大 2 圆形缩小
3 圆形扩大 4 下到上刷新 5 上到下刷新
6 左到右刷新 7 右到左刷新 8 竖百叶窗
9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗
12 点扩散 13 左右到中间刷新 14 中间到左右刷新
15 中间到上下 16 上下到中间 17 右下到左上
18 右上到左下 19 左上到右下 20 左下到右上
21 横条 22 竖条 23 以上22种随机选择一种

配置好效果后,我们要通过javascript来装备(Apply)我们的元素,然后播放(Play)动态滤镜。我们也可以使用status来判断我们元素当前播放的状态。

el.filters(过滤类型).Apply(); //准备

el.filters(过滤类型).Play(); //播放

el.filters(过滤类型).Stop(); //停止

el.filters(过滤类型).status //获取动态滤镜当前状态。