CSS滤镜特效
<!--type="progid:DXImageTransform.Microsoft.Blinds(sProperties)" 1.百叶窗效果-->
<!--type="progid:DXImageTransform.Microsoft.Barn(orientation=vertical)" 2.效果为从中间向左右拉开-->
<!--type="progid:DXImageTransform.Microsoft.Barn(orientation=horizontal)" 3.效果为从中间向上下拉开-->
<!--type="progid:DXImageTransform.Microsoft.Barn(orientation=vertical motion=in)" 4.效果为从左右向中间拉开-->
<!--type="progid:DXImageTransform.Microsoft.Barn(orientation=horizontal motion=in)" 5.效果为从上下向中间拉开-->
<!--type="barwipe" 6.☆是从左到右拉开的效果-->
<!--type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=left, squaresX=20, squaresY=20)" 7.是棋格显示效果,向左边拉开-->
<!--type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=right, squaresX=20, squaresY=20)" 8.是棋格显示效果,向右边拉开-->
<!--type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=up, squaresX=20, squaresY=20)" 9.是棋格显示效果,向上拉开-->
<!--type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=down, squaresX=20, squaresY=20)" 10.是棋格显示效果,向下拉开-->
<!--type="ellipsewipe" 11.☆是正中小圆向外扩散的效果-->
<!--type="Fade" 12.☆渐隐渐显效果-->
<!--type="progid:DXImageTransform.Microsoft.Inset()" 13.矩形从左上角向右下角拉开-->
<!--type="progid:DXImageTransform.Microsoft.Iris(IrisStyle=cross)" 14.正中间X形向外扩大效果-->
<!--type="progid:DXImageTransform.Microsoft.Iris(IrisStyle=SQUARE)" 15.正中间矩形窗口逐渐扩大的效果--> (效果:同16)
<!--type="iriswipe" 16.☆是正中间矩形窗口逐渐扩大的效果-->
<!--type="progid:DXImageTransform.Microsoft.Iris(sProperties)" 17.正中十字形向外扩大效果--> (效果:同18)
<!--type="progid:DXImageTransform.Microsoft.Iris(IrisStyle=PLUS)" 18.正中十字形向外扩大效果-->
<!--type="progid:DXImageTransform.Microsoft.Iris(IrisStyle=STAR" 19.正中星形向外扩大效果-->
<!--type="progid:DXImageTransform.Microsoft.Iris(IrisStyle=DIAMOND)" 20.正中菱形向处扩散效果-->
<!--type="progid:DXImageTransform.Microsoft.Iris(IrisStyle=circle)" 21.正中小圆向处扩散效果-->
<!--type="progid:DXImageTransform.Microsoft.Pixelate(sProperties)" 22.马赛克渐显效果-->
<!--type="pushWipe" 23.☆右往左边拖动的效果-->
<!--type="progid:DXImageTransform.Microsoft.RandomBars(sProperties)" 24.横向格线显示效果-->
<!--type="progid:DXImageTransform.Microsoft.RandomDissolve()" 25.是流沙渐显效果-->
<!--type="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=clock)" 26.从中间像种表一样旋转的效果-->
<!--type="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=radial)"27.从左上角像种表一样旋转的效果-->
<!--type="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=wedge)" 28.从中间像扇形一样旋转的效果-->
<!--type="snakewipe" 29.☆是蛇形效果-->
<!--type="spiralwipe" 30.☆是螺旋显示效果-->
<!--type="progid:DXImageTransform.Microsoft.slideWipe" 31.☆右往左边打开拉开的效果-->
<!--type="progid:DXImageTransform.Microsoft.Slide(bands=5,slideStyle='push')" 32.分几个横块向中间合并-->
<!--type="progid:DXImageTransform.Microsoft.Slide(bands=10,SlideStyle=swap)" 33.分几个横块向中间合并并有晃动的效果-->
<!--type="progid:DXImageTransform.Microsoft.Slide(bands=10,SlideStyle=hide)" 34.分几个横块向中间合并并有交错的效果-->
<!--type="progid:DXImageTransform.Microsoft.Spiral(SProperties)" 35.从四周向中间收缩效果-->
<!--type="progid:DXImageTransform.Microsoft.Strips(motion=rightdown)" 36.向右下角斜线推进效果-->
<!--type="progid:DXImageTransform.Microsoft.Strips(motion=leftdown)" 37.向左下角斜线推进效果-->
<!--type="progid:DXImageTransform.Microsoft.Strips(motion=rightup)" 38.向右上角斜线推进效果-->
<!--type="progid:DXImageTransform.Microsoft.Strips(motion=leftup)" 39.向左上角斜线推进效果-->
<!--type="progid:DXImageTransform.Microsoft.Stretch(StretchStyle=SPIN)" 40.从中向两边拉伸效果-->
<!--type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle='push')" 41.从左向右旋转拉伸效果-->
<!--type="progid:DXImageTransform.Microsoft.Wheel(spokes=8)" 42.风车式样显示效果-->
<!--type="progid:DXImageTransform.Microsoft.Wipe(GradientSize=.50, wipeStyle=0, motion='forward')" 43.边缘模糊效果,style=0为从左向右-->
<!--type="progid:DXImageTransform.Microsoft.Wipe(GradientSize=.50, wipeStyle=1, motion='forward')" 44.边缘模糊效果,style=1为从上至下-->
<!--type="progid:DXImageTransform.Microsoft.Zigzag(sProperties)" 45.从上至下逐行显示效果-->
#####################################################
<!--图型变换代码如下.
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哀悼版的样式。
#########################################################################
//以下为:“hdp(57种).js”的代码
var suu =1;
var iTransNumber=0;
var garTransitions = new Array(); //arrary of filter strings
garTransitions[0] = "progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=2.0)"; <!--18.可调渐变转化效果-->
garTransitions[1] = "progid:DXImageTransform.Microsoft.Wipe(GradientSize=.50, wipeStyle=0, motion=forward)"; <!--36.边缘模糊效果,从左向右-->
garTransitions[2] = "progid:DXImageTransform.Microsoft.Wipe(GradientSize=.50, wipeStyle=0, motion=reverse)"; <!--37.边缘模糊效果,从右向左-->
garTransitions[3] = "progid:DXImageTransform.Microsoft.Wipe(GradientSize=.50, wipeStyle=1, motion=forward)"; <!--36.边缘模糊效果,从上至下-->
garTransitions[4] = "progid:DXImageTransform.Microsoft.Wipe(GradientSize=.50, wipeStyle=1, motion=reverse)"; <!--37.边缘模糊效果,从下向上-->
garTransitions[5] = "progid:DXImageTransform.Microsoft.Inset(enabled=ture)"; <!--18.向右下插入效果-->
garTransitions[6] = "progid:DXImageTransform.Microsoft.Wheel(spokes=8)"; <!--34.风车式样显示效果-->
garTransitions[7] = "progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=wedge)"; <!--22.从中间像扇形一样旋转的效果-->
garTransitions[8] = "progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=clock)"; <!--20.从中间像种表一样旋转的效果-->
garTransitions[9] = "progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=radial)"; <!--21.从左上角像种表一样旋转的效果-->
garTransitions[10] = "progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)"; <!--32.Z字形曲折效果-->
garTransitions[11] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=STAR,motion=out"; <!--7.正中星形向外扩大效果-->
garTransitions[12] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=STAR,motion=in"; <!--8.正中星形向外缩小效果-->
garTransitions[13] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=DIAMOND,motion=out)"; <!--9.正中菱形向外扩散效果-->
garTransitions[14] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=DIAMOND,motion=in)"; <!--9.正中菱形向内缩小效果-->
garTransitions[15] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=circle,motion=out)"; <!--10.正中小圆向外扩大效果-->
garTransitions[16] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=circle,motion=in)"; <!--11.正中小圆向内缩小效果-->
garTransitions[17] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=cross,motion=out)"; <!--1.正中间X形向外扩大效果-->
garTransitions[18] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=cross,motion=in)"; <!--2.正中间X形向内缩小效果-->
garTransitions[19] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=SQUARE,motion=out)"; <!--3.正中间矩形窗口逐渐扩大的效果-->
garTransitions[20] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=SQUARE,motion=in)"; <!--4.正中间矩形窗口逐渐缩小的效果-->
garTransitions[21] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=PLUS,motion=out)"; <!--5.正中十字形向外扩大效果-->
garTransitions[22] = "progid:DXImageTransform.Microsoft.Iris(IrisStyle=PLUS,motion=in)"; <!--6.正中十字形向外缩小效果-->
garTransitions[23] = "progid:DXImageTransform.Microsoft.Barn(orientation=vertical motion=in)"; <!--1.左右向中部收缩-->
garTransitions[24] = "progid:DXImageTransform.Microsoft.Barn(orientation=vertical motion=out)"; <!--2.中部向左右展开-->
garTransitions[25] = "progid:DXImageTransform.Microsoft.Barn(orientation=horizontal motion=in)"; <!--3.上下向中部收缩-->
garTransitions[26] = "progid:DXImageTransform.Microsoft.Barn(orientation=horizontal motion=out)"; <!--4.中部向上下展开-->
garTransitions[27] = "progid:DXImageTransform.Microsoft.Blinds(bands=15,direction=down)"; <!--40.百叶窗效果(从上至下)-->
garTransitions[28] = "progid:DXImageTransform.Microsoft.Blinds(bands=15,direction=up)"; <!--41.百叶窗效果(从下至上)-->
garTransitions[29] = "progid:DXImageTransform.Microsoft.Blinds(bands=20,direction=right)"; <!--42.百叶窗效果(从左至右)-->
garTransitions[30] = "progid:DXImageTransform.Microsoft.Blinds(bands=20,direction=left)"; <!--43.百叶窗效果(从右至左)-->
garTransitions[31] = "progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)"; <!--44.向上逐渐擦除-->
garTransitions[32] = "progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)"; <!--45.向下逐渐擦除-->
garTransitions[33] = "progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)"; <!--46.向左逐渐擦除-->
garTransitions[34] = "progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)"; <!--47.向右逐渐擦除-->
garTransitions[35] = "progid:DXImageTransform.Microsoft.CheckerBoard(direction=left, squaresX=20, squaresY=20)"; <!--6.是棋格显示效果,向左边拉开-->
garTransitions[36] = "progid:DXImageTransform.Microsoft.CheckerBoard(direction=right, squaresX=20, squaresY=20)"; <!--7.是棋格显示效果,向右边拉开-->
garTransitions[37] = "progid:DXImageTransform.Microsoft.CheckerBoard(direction=up, squaresX=20, squaresY=20)"; <!--8.是棋格显示效果,向上拉开-->
garTransitions[38] = "progid:DXImageTransform.Microsoft.CheckerBoard(direction=down, squaresX=20, squaresY=20)"; <!--9.是棋格显示效果,向下拉开-->
garTransitions[39] = "progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)"; <!--19.是流沙渐显效果-->
garTransitions[40] = "progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)"; <!--18.随机水平线效果-->
garTransitions[41] = "progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)"; <!--18.随机垂直线效果-->
garTransitions[42] = "progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)"; <!--27.螺旋形收缩效果-->
garTransitions[43] = "progid:DXImageTransform.Microsoft.Strips(motion=rightdown)"; <!--28.向右下角斜线推进效果-->
garTransitions[44] = "progid:DXImageTransform.Microsoft.Strips(motion=leftdown)"; <!--29.向左下角斜线推进效果-->
garTransitions[45] = "progid:DXImageTransform.Microsoft.Strips(motion=rightup)"; <!--30.向右上角斜线推进效果-->
garTransitions[46] = "progid:DXImageTransform.Microsoft.Strips(motion=leftup)"; <!--31.向左上角斜线推进效果-->
garTransitions[47] = "progid:DXImageTransform.Microsoft.Slide(bands=1,slideStyle='push')"; <!--24.分2个横块向中间合并-->
garTransitions[48] = "progid:DXImageTransform.Microsoft.Slide(bands=20,slideStyle='push')"; <!--24.分20个横块向中间合并-->
garTransitions[49] = "progid:DXImageTransform.Microsoft.Slide(bands=1,SlideStyle=swap)"; <!--25.分1个横块向中间合并并有晃动的效果-->
garTransitions[50] = "progid:DXImageTransform.Microsoft.Slide(bands=20,SlideStyle=swap)"; <!--25.分20个横块向中间合并并有晃动的效果-->
garTransitions[51] = "progid:DXImageTransform.Microsoft.Slide(bands=1,SlideStyle=hide)"; <!--26.分1个横块向中间合并并有交错的效果-->
garTransitions[52] = "progid:DXImageTransform.Microsoft.Slide(bands=20,SlideStyle=hide)"; <!--26.分20个横块向中间合并并有交错的效果-->
garTransitions[53] = "progid:DXImageTransform.Microsoft.Stretch(StretchStyle=SPIN)"; <!--32.从中向两边拉伸效果-->
garTransitions[54] = "progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)"; <!--33.从左向右旋转拉伸效果-->
garTransitions[55] = "progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)"; <!--33.从左向右旋转拉伸效果-->
garTransitions[56] = "progid:DXImageTransform.Microsoft.Pixelate(sProperties)"; <!--17.马赛克渐显效果-->
var kirikaeGa=new Array()
for (kazu=0;kazu<Ga.length;kazu++){
kirikaeGa[kazu]=new Image()
kirikaeGa[kazu].src=Ga[kazu]}
function kirikae(){
if (window.createPopup)
rittai.style.filter = garTransitions[iTransNumber];
iTransNumber++;
if(iTransNumber==garTransitions.length)
iTransNumber=0;
if (window.createPopup)
rittai.filters[0].apply();
document.images.rittai.src=kirikaeGa[suu].src;
if (window.createPopup)
rittai.filters[0].play()
suu++
if (suu==kirikaeGa.length)
suu=0;
setTimeout("kirikae()",hayasa)
}
setTimeout("kirikae()",hayasa)