Web开发中对元素样式使用过滤器以增强其可视化效果

在WEB开发中,为了增强界面的美观往往需要对一些元素实现一些阴影、模糊、过渡等效果,最直接的方法就是通过美工制做图片来实现,IE从4.0版本开始支持过滤器,可以用此功能来实现诸如阴影、模糊、过渡等效果。我们可以采用对元素的样式使用过滤器来完成简单的效果的实现
我们以IMG和DIV元素为例
模糊效果:
<IMG ID="sample1" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)">
反转效果:
<IMG ID="sample2" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)">
过渡效果:
<DIV STYLE="FILTER:progid:DXImageTransform.Microsoft.gradient (startColorstr=#000000, endColorstr=#FFFFFF)"></DIV>
虚化效果:
<IMG ID="sample3" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.Alpha(opacity=20)">
DIV的过渡
<DIV STYLE="FILTER:progid:DXImageTransform.Microsoft.gradient (startColorstr=#000000, endColorstr=#FFFFFF)"></DIV>
变形
<IMG ID="sample5" SRC="hero.jpg" style="FILTER: progid:DXImageTransform.Microsoft.Wave(freq=1,LightStrength=10,Phase=10,Strength=5)">
效果截图:
 
posted @ 2005-12-14 15:02 Francis Liang 阅读(...) 评论(...) 编辑 收藏