首页
行业
前端
特效
人生
知识库
站内搜索：
首页
>>
前端
>> 内容
CSS滤镜示范(filter)附源代码(静态滤镜)
时间：2006/8/5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>filter(css滤镜)</title> <style type="text/css"> body { margin: 0px; padding: 0px; } table { font-size: 12px; border: 1px solid #0000FF; } tr,td { padding: 0px; border: 1px solid #0000FF; } </style> <script language="javascript"> </script> </head> <body> <strong>filter视觉滤镜的种类</strong> <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 title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Alpha(style=2)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Blur(add=0,direction=90,strength=20)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Chroma(color=#08B218)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Dropshadow(color=#FF3300,offX=5,offY=5,positive=1)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:FlipV" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Glow(color=#33FF33,strength=10)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Gray" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Invert" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Mask(color=#0000FF)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:shadow(color=red,direction=135)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Wave(add=0,freq=3,strength=10,lightstrength=20,phase=50)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Xray" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Alpha:</strong> <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 title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,finishY=50)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Alpha(style=1,opacity=70,finishopacity=20,startX=0,startY=0,finishX=50,finishY=50)")</td onload="javascript:DrawImage(this,310)"> </tr> </table> </div> <strong>Blur:</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>显示原来的图片，且以270度的方向模糊20px</td> <td width=200>不显示原来的图片，且以90度方向模糊20px</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:blur(add=1,direction=270,strength=20)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:blur(add=0,direction=90,strength=20)" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Chroma</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>Chroma指定的字体颜色(我是CCHXP)变为透明</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Chroma(color=#08B218)" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>DropShadow</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>设置阴影颜色为淡绿色，往右移5px，往下移5px，且阴影呈不透明的效果。</td> <td width=200>设置阴影颜色为粉红色，往左移5px，往上移5px，且阴影呈不透明的效果。</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:DropShadow(color=lightgreen,offX=5px,offY=5px,positive=1)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:DropShadow(color=pink,offX=-5,offY=-5,positive=1)" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>FlipH&FlipV</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>设置图片水平翻转FlipH</td> <td width=200>设置图片垂直翻转FlipV</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:FlipH" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:FlipV" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Glow</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>设置图片光晕颜色为黄色，强度为10</td> <td width=200>设置图片光晕颜色为红色，强度为20</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Glow(color=yellow,strength=10)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Glow(color=pink,strength=20)" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Gray</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>将图片的颜色去除，以达到灰色效果</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Gray" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Invert</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>设置图片颜色呈底片效果</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Invert" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Mask</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>设置图片的屏蔽颜色为蓝色</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Mask(color=#0000FF)" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Shadow</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>设置图片阴影颜色为绿色，往225度方向</td> <td width=200>设置图片阴影颜色为红色，往135度方向</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Shadow(color=green)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Shadow(color=red)" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Wave</strong> <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 title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Wave(add=0,freq=5,strength=20,lightstrength=30,phase=50)" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Wave(add=1,freq=3,strength=50,lightstrength=50,phase=100)" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Xray</strong> <div> <table> <tr> <td width=200>原始图片</td> <td width=200>X光照片的效果</td> </tr> <tr> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Xray" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> <strong>Gray&Invert&Xray比较</strong> <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 title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Gray" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Invert" onload="javascript:DrawImage(this,310)"></td> <td><img title="CSS滤镜示范(filter)附源代码(静态滤镜)" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" src=/UploadFiles/201807/20180717110718917.gif style="filter:Xray" onload="javascript:DrawImage(this,310)"></td> </tr> </table> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
上一篇：
CSS实现表格的背景两色渐变
下一篇：
保存几个不错的css特效字
用户评论
已有
0
人评论
阅读更多评论
相关文章
·
CSS2018：突破边界思维 安全是所有0前面的1 _科技_环球网
·
css中position:absolute和relative的知识点
·
CSS之水平垂直居中布局的五种方法介绍
·
CSS照片墙代码实现教程
·
CSS 控制<table>内容超出表格长度后自动隐藏教程
·
CSS文本，锚伪类选择器以及盒子模型（代码实例）
·
less在webstorm中的配置教程
·
CSSWord的文档结构视图功能实现教程
·
CSS键盘翻页功能实现教程
·
CSS浮动元素与清除浮动的理解
返回顶部
