源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

CSS滤镜示范(filter)附源代码(静态滤镜)

时间：2022-02-23 15:01 编辑：来源：阅读：
扫一扫，手机访问

摘要：CSS滤镜示范(filter)附源代码(静态滤镜)

<meta content="text/html; charset=gb2312" http-equiv="Content-Type"> 
filter(css滤镜)[b]filter视觉滤镜的种类[/b] 
<div> 
<table> 
    <tr> 
        <td width="80">Alpha(透明度)</td> 
        <td width="80">Blur(模糊)</td> 
        <td width="80">Chroma(指定颜色透明)</td> 
        <td width="80">DropShadow(不透明阴影)</td> 
        <td width="80">FlipH&FlipV(翻转)</td> 
        <td width="80">Glow(边缘光晕)</td> 
        <td width="80">Gray(去色)</td> 
        <td width="80">Invert(底片效果)</td> 
        <td width="80">Mask(遮照效果)</td> 
        <td width="80">filter:Shadow(影子)</td> 
        <td width="80">Wave(波浪)</td> 
        <td width="80">Xray(轮廓加亮)</td> 
    </tr> 
    <tr> 
        <td height="140">[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Alpha:[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">开始透明度(opacity):100
结束透明度(finishopacity):0
开始位置(startX,startY):(0,0)
结束位置(finishX,finishY):(50,50)</td> 
        <td width="200">开始透明度(opacity):70
结束透明度(finishopacity):20
开始位置(startX,startY):(0,0)
结束位置(finishX,finishY):(50,50)</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Blur:[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">显示原来的图片，且以270度的方向模糊20px</td> 
        <td width="200">不显示原来的图片，且以90度方向模糊20px</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Chroma[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">Chroma指定的字体颜色(我是CCHXP)变为透明</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]DropShadow[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">设置阴影颜色为淡绿色，往右移5px，往下移5px，且阴影呈不透明的效果。</td> 
        <td width="200">设置阴影颜色为粉红色，往左移5px，往上移5px，且阴影呈不透明的效果。</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]FlipH&FlipV[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">设置图片水平翻转FlipH</td> 
        <td width="200">设置图片垂直翻转FlipV</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Glow[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">设置图片光晕颜色为黄色，强度为10</td> 
        <td width="200">设置图片光晕颜色为红色，强度为20</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Gray[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">将图片的颜色去除，以达到灰色效果</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Invert[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">设置图片颜色呈底片效果</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Mask[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">设置图片的屏蔽颜色为蓝色</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Shadow[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">设置图片阴影颜色为绿色，往225度方向</td> 
        <td width="200">设置图片阴影颜色为红色，往135度方向</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Wave[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">不显示原始图片，有5个振幅为20象素的波浪，其光的强度为30，波浪其始位置为50</td> 
        <td width="200">显示原始图片，有3个振幅为50象素的波浪，其光的强度为50，波浪起始位置为100</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Xray[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">X光照片的效果</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>[b]Gray&Invert&Xray比较[/b] 
<div> 
<table> 
    <tr> 
        <td width="200">原始图片</td> 
        <td width="200">Gray效果</td> 
        <td width="200">Invert效果</td> 
        <td width="200">Xray效果</td> 
    </tr> 
    <tr> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
        <td>[img]http://www.blueidea.com/img/common/logo.gif[/img]
</td> 
    </tr> 
</table> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：利用AJAX实现无刷新数据分页
下一篇：CSS滤镜参考

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部