CSS渐变滤镜大全

注意CSS渐变滤镜与网页变换效果是不同的概念,不过相同的是他们都只适用于IE,在FF下无效。


使用方法:
Eg1:
<meta http-equiv="Page-Enter" Content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=8)">
<meta http-equiv="Page-Exit" Content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=8)">


Eg2:
<table cellpadding="0" cellspacing="0" width="100%" height="22" border="0">
  <tr>
  <td id="msviRegionIdGraphic" bgcolor="#FFFFFF"></td>
  <td id="msviRegionGradient1" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"></td>
  <td id="msviRegionGradient2" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#98B2E6', endColorStr='#3568CC', gradientType='1')"></td>
  </tr>
</table>




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,其余同。

Leave a Reply

Your email address will not be published.