网络编程
网页制作
网络编程
脚本专栏
数据库
服务器
操作系统
网站运营
平面设计
电脑基础
首页
>
网络编程
> 浏览文章
CSS滤镜示范(filter)附源代码(静态滤镜)
(编辑:jimmy 日期: 2025/5/4 浏览:3 次 )
<!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> </head> <body> <strong>filter视觉滤镜的种类</strong> Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) DropShadow(不透明阴影) FlipH&FlipV(翻转) Glow(边缘光晕) Gray(去色) Invert(底片效果) Mask(遮照效果) filter:Shadow(影子) Wave(波浪) Xray(轮廓加亮) <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Alpha:</strong> 原始图片 开始透明度(opacity):100结束透明度(finishopacity):0开始位置(startX,startY):(0,0)结束位置(finishX,finishY):(50,50) 开始透明度(opacity):70结束透明度(finishopacity):20开始位置(startX,startY):(0,0)结束位置(finishX,finishY):(50,50) <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a>Blur:</strong> 原始图片 显示原来的图片,且以270度的方向模糊20px 不显示原来的图片,且以90度方向模糊20px <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Chroma</strong> 原始图片 Chroma指定的字体颜色(我是CCHXP)变为透明 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>DropShadow</strong> 原始图片 设置阴影颜色为淡绿色,往右移5px,往下移5px,且阴影呈不透明的效果。 设置阴影颜色为粉红色,往左移5px,往上移5px,且阴影呈不透明的效果。 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>FlipH&FlipV</strong> 原始图片 设置图片水平翻转FlipH 设置图片垂直翻转FlipV <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Glow</strong> 原始图片 设置图片光晕颜色为黄色,强度为10 设置图片光晕颜色为红色,强度为20 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Gray</strong> 原始图片 将图片的颜色去除,以达到灰色效果 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Invert</strong> 原始图片 设置图片颜色呈底片效果 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Mask</strong> 原始图片 设置图片的屏蔽颜色为蓝色 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Shadow</strong> 原始图片 设置图片阴影颜色为绿色,往225度方向 设置图片阴影颜色为红色,往135度方向 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Wave</strong> 原始图片 不显示原始图片,有5个振幅为20象素的波浪,其光的强度为30,波浪其始位置为50 显示原始图片,有3个振幅为50象素的波浪,其光的强度为50,波浪起始位置为100 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Xray</strong> 原始图片 X光照片的效果 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <strong>Gray&Invert&Xray比较</strong> 原始图片 Gray效果 Invert效果 Xray效果 <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> <a href="javascript:;" onclick="showimg('$2');"><a href="javascript:;" onclick="showimg('$2');"><img src="$2" alt="CSS滤镜示范(filter)附源代码(静态滤镜)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></a> </body> </html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上一篇:
CSS实现表格的背景两色渐变
下一篇:
保存几个不错的css特效字
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。
友情链接:
杰晶网络
DDR爱好者之家
南强小屋
黑松山资源网
白云城资源网
SiteMap
首页
破解
音乐
影视