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

网络编程 2024/11/1 佚名

3 2 1

<!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> filter视觉滤镜的种类 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> Alpha: 原始图片 开始透明度(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: 原始图片 显示原来的图片，且以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> Chroma 原始图片 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> DropShadow 原始图片 设置阴影颜色为淡绿色，往右移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> FlipH&FlipV 原始图片 设置图片水平翻转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> Glow 原始图片 设置图片光晕颜色为黄色，强度为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> Gray 原始图片 将图片的颜色去除，以达到灰色效果 <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> Invert 原始图片 设置图片颜色呈底片效果 <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> Mask 原始图片 设置图片的屏蔽颜色为蓝色 <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> Shadow 原始图片 设置图片阴影颜色为绿色，往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> Wave 原始图片 不显示原始图片，有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> Xray 原始图片 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> Gray&Invert&Xray比较 原始图片 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需再刷新一下页面才能执行]