|
CSS渐变滤镜大全 |
发布者:广元动力网络 发布时间:2009-6-14 点击次数:1935 |
|
|
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >
CSS渐变滤镜大全
23.随机变换效果 type="progid:DXImageTransform.Microsoft.RevealTrans(enabled=ture,transition=23)" 0.方形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)" 交叉形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)" 菱形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)"
1.方形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)" 交叉形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)" 菱形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)" 2.圆形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)" 加号形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)" 星形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)"
3.圆形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)" 加号形逐渐变小 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=in)" 星形逐渐变大 type="progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)" 4.向上逐渐擦除 type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)" 5.向下逐渐擦除 type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)" 6.向左逐渐擦除 type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)" 7.向右逐渐擦除 type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)" 8.垂直百叶窗效果 type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)" type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)" type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)" type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)" 9.水平百叶窗效果 type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)" type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)" type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=down)" type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=up)" 10.横向棋盘效果 type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)" type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=up,squaresX=12,squaresY=12)" type="progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)" type="progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=2,squaresY=2)" type="progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)" type="progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=60,squaresY=60)" 11.纵向棋盘效果 type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)" type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)" type="progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)" type="progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=2,squaresY=2)" type="progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)" type="progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=60,squaresY=60)" 12.随机溶解效果 type="progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)" 13.左右向中部收缩 type="progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)" 14.中部向左右展开 type="progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)" 15.上下向中部收缩 type="progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)" 16.中部向上下展开 type="progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=horizontal)" 17.阶梯状向左下展开 type="progid:DXImageTransform.Microsoft.Strips(motion=leftdown)" 18.阶梯状向左上展开 type="progid:DXImageTransform.Microsoft.Strips(motion=leftup)" 19.阶梯状向右下展开 type="progid:DXImageTransform.Microsoft.Strips(motion=rightdown)" 20.阶梯状向右上展开 type="progid:DXImageTransform.Microsoft.Strips(motion=rightup)" 21.随机水平线效果 type="progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)" 22.随机垂直线效果 type="progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)" 24.标准渐变转化效果 type="BlendTrans(enabled=true,percent=10)" 25.可调渐变转化效果 type="progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=1.0)" 26.向右下插入效果 type="progid:DXImageTransform.Microsoft.Inset(enabled=ture)" 27.马赛克效果 type="progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)" 28.时钟形射线擦除 type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)" 29.楔子形射线擦除 type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)"
30.辐射形射线擦除 type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)" 31.隐藏式幻灯片效果 type="progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)" type="progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)" 32.推动式幻灯片效果 type="progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)" type="progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)" 33.交换式幻灯片效果 type="progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)" type="progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)" 34.螺旋形收缩效果 type="progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)" 35.隐藏式伸展效果 type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)" 36.推动式伸展效果 type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)" 37.旋转式伸展效果 type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)" 38.风车轮转动效果 type="progid:DXImageTransform.Microsoft.Wheel(spokes=20)" 39.梯度擦除效果 type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)" type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)" type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)" type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)"
40.Z字形曲折效果 type="progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)"
--> 注:头23个滤镜(指有标号的)是常见滤镜,均可用第23号滤镜(排在文章中的第一种滤镜)变换参数获得。如1号滤镜可以将23号滤镜中的transition=23改为transition=1,其余同。
给大家一个列子!
<style type="text/css"> <!-- body{ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) } --> </style>
这个是用过滤器把网页的BODY过滤以灰度方式输出,也就是5.12哀悼版的样式。 |
|
|
|
|