Html+Time代码 动态滤镜资料汇编

The First One

棋盘格
四个方向
方格大小双向可调
The Second One

轮辐状
辐数可设置
The Third One

溶解
无参数设置
The Fourth One

螺旋状
方格大小可调
The Fifth One

模糊边界过度
两个方向可调
边界宽度可调
The Sixth One

淡化效果
淡化分段可调
The Seventh One

幻灯样式
三种型式
The Eighth One

平面几何体
六种型式
菱.圆.斜十.十.方.星
两种方向
The Ninth One

拉幕效果
两个方向可设置
水平垂直可设置
The Tenth One

扇形效果
三种式样可选
时钟.对称.射线
The Eleventh One

乱细线
水平垂直可选
The Twelfth One

拉伸效果
三种式样可选
The Thirteenth One

方框边角插入
无参数设置
The Fourteenth One

斜锯齿线拉幕
可选四个方向
The Fifteenth One

阶梯边拉幕效果
方块大小单向可调
The Sixteenth One

象素块渐变
象素块大小可调
The Seventeenth One

栅栏拉幕效果
四个方向可调
幅宽可调




基本代码(不涉及脚本)

<?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace /?>

<t:SEQ repeatCount = "indefinite">

<t:MEDIA style="FILTER: alpha; LEFT: 0px; WIDTH: 640px; height:425px; POSITION: absolute; TOP: 0px" src = "http://www.eyeyeye.net/images/Works/20074/eye7520807429026856.jpg" dur = "6" fill = "transition" timeContainer = "par">
<t:TRANSITIONFILTER from = "0" to = "1" type = "progid:DXImageTransform.Microsoft.Wheel(spokes=8)" dur = "2"></t:TRANSITIONFILTER></t:MEDIA>

············

<t:MEDIA style="FILTER: alpha; LEFT: 0px; WIDTH: 640px; height:425px; POSITION: absolute; TOP: 0px" src = "http://www.eyeyeye.net/images/Works/20074/eye84202074102122248.jpg" dur = "6" fill = "transition" timeContainer = "par">
<t:TRANSITIONFILTER from = "0" to = "1" type = "progid:DXImageTransform.Microsoft.Spiral(duration=3, GridSizeX=25, GridSizeY=25)" dur = "2"></t:TRANSITIONFILTER></t:MEDIA>

</t:SEQ>


  第一、二行及最后一行是必须的代码,中间两段,每段是一个图片及相关代码。增加图片,可复制一段,更换图片链接和“type”后面的滤镜代码即可。

  1、滤镜代码说明:
type = "progid:DXImageTransform.Microsoft.Wheel(spokes=8)"
  这一行代码,白色部分不必动,更换黄色部分即可。括号前面是滤镜名,括号内是相关参数。如果有多个参数,用逗号分隔。

  2、滤镜及参数:(等号前是参数名,等号后,方括号内是可选、可调的参数项)
一、棋盘格--CheckerBoard(duration=2, direction='left',SquaresX='10',SquaresX='16')
       direction=['up','down','left','right']  SquaresX=['12']  SquaresY=['12']

二、轮辐状--Wheel(spokes=8)  spokes=8为分块的数量

三、溶解--RandomDissolve(sProperties)  无参数

四、螺旋状--Spiral(duration=3, GridSizeX=25, GridSizeY=25)

五、模糊边界过度--gradientWipe(duration=3, WipeStyle='0',gradientsize='0.1')  
          WipeStyle=['0','1']  gradientSize=['小于1的数']

六、淡化效果--fade(overlap='0.8')   overlap:原图与新图在转换过程中,重迭的时间;默认值为1。

七、幻灯样式--Slide(slideStyle='push',Bands='10')  
        slideStyle=['swap','hide','push']  Bands=['10']

八、平面几何体--Iris(irisStyle = 'CROSS', motion = 'in')  
         irisStyle =['DIAMOND','CIRCLE','CROSS','PLUS','SQUARE','STAR']  motion=['in','out']

九、拉幕效果--barn(duration=5 orientation='vertical', motion ='in')  
        orientation=['horizontal','vertical']

十、扇形效果--RadialWipe(duration=2, wipeStyle='RADIAL')  
        wipeStyle = ['clock','WEDGE','RADIAL']

十一、乱细线--RandomBars(duration=5, orientation='horizontal')  
        orientation=['horizontal','vertical']

十二、拉伸效果--Stretch(duration=3, StretchStyle ='spin')  
         StretchStyle = ['HIDE','PUSH','SPIN']

十三、方框边角插入--Inset(sProperties)  无参数

十四、斜锯齿线拉幕--Strips(duration=5, motion='leftup')  
           motion = ['leftup','leftdown','rightup','rightdown']

十五、阶梯边拉幕效果--Zigzag(duration=6, GridSizeX=25, GridSizeY=25)  

十六、象素块渐变--Pixelate(maxSquare ='50')  

十七、栅栏拉幕效果--Blinds(Direction='left',Bands='10')  
           Direction=['up','down','left','right']  Bands=['10']
 

 
  Html+Time 动态滤镜应用  
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20