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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› HTML›HTML/CSS编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

<!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></td>         <td></td>         <td></td>         <td></td>         <td></td>         <td></td>         <td></td>         <td></td>         <td></td>         <td></td>         <td></td>         <td></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></td>         <td></td>         <td>     </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></td>         <td></td>         <td></td>     </tr> </table> </div> <strong>Chroma</strong> <div> <table>     <tr>         <td width=200>原始图片</td>         <td width=200>Chroma指定的字体颜色(我是CCHXP)变为透明</td>     </tr>     <tr>         <td></td>         <td></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></td>         <td></td>         <td></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></td>         <td></td>         <td></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></td>         <td></td>         <td></td>     </tr> </table> </div> <strong>Gray</strong> <div> <table>     <tr>         <td width=200>原始图片</td>         <td width=200>将图片的颜色去除，以达到灰色效果</td>     </tr>     <tr>         <td></td>         <td></td>     </tr> </table> </div> <strong>Invert</strong> <div> <table>     <tr>         <td width=200>原始图片</td>         <td width=200>设置图片颜色呈底片效果</td>     </tr>     <tr>         <td></td>         <td></td>     </tr> </table> </div> <strong>Mask</strong> <div> <table>     <tr>         <td width=200>原始图片</td>         <td width=200>设置图片的屏蔽颜色为蓝色</td>     </tr>     <tr>         <td></td>         <td></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></td>         <td></td>         <td></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></td>         <td></td>         <td></td>     </tr> </table> </div> <strong>Xray</strong> <div> <table>     <tr>         <td width=200>原始图片</td>         <td width=200>X光照片的效果</td>     </tr>     <tr>         <td></td>         <td></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></td>         <td></td>         <td></td>         <td></td>     </tr> </table> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]