CSS滤镜的使用ppt课件.ppt
第第11章章 CSS滤镜的使滤镜的使用用11.1 静态滤镜静态滤镜11.1.1 透明滤镜透明滤镜11.1.2 模糊滤镜模糊滤镜11.1.3 基色滤镜基色滤镜11.1.4 落影滤镜落影滤镜11.1.5 光晕滤镜光晕滤镜11.1.6 光照滤镜光照滤镜11.1.7 翻转滤镜翻转滤镜11.1.8 X光滤镜光滤镜11.1.9 运动模糊滤镜运动模糊滤镜11.1.10 阴影滤镜阴影滤镜11.1.11 波浪滤镜波浪滤镜11.1.12 图片插入滤镜图片插入滤镜11.1.13 渐变滤镜渐变滤镜11.1.14 浮雕滤镜浮雕滤镜11.1.1 透明滤镜透明滤镜透明滤镜可以用于对网页的层次效果进行渲染。设置透明滤镜后，标签的颜色会变浅，并且处于底层的标签的颜色和轮廓会显现出来。透明滤镜（Alpha滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Alpha(enabled=true|false,style=value,opacity=value,finishOpacity=value,startX=value,startY=value,finishX=value,finishY=value);11.1.2 模糊滤镜模糊滤镜模糊滤镜可以对清晰的含有图片或文字的标签进行模糊化，会呈现出颜色减淡、轮廓不清、区域难以区分的效果。模糊滤镜（Blur滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Alpha(enabled=true|false,makeShadow=true|false,pixelRadius=value,shadowOpacity=value);11.1.3 基色滤镜基色滤镜基色滤镜可以将标签进行灰度化、透明化以及翻转处理。基色滤镜（BasicImage滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.BasicImage(enable=true|false,grayScale=0|1,mirror=0|1,opacity=value,Xray=0|1);11.1.4 落影滤镜落影滤镜通过落影滤镜可以设置标签的阴影效果，包括阴影的颜色、位置等属性，落影滤镜（DropShadow滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.DropShadow(enabled=true|false,color=value,offX=value,offY=value,positive=true|false);11.1.5 光晕滤镜光晕滤镜通过光晕滤镜可以设置标签文字和边框的光晕效果，包括光晕的颜色以及光照范围，光晕滤镜（Glow滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Glow(enabled=true|false, color=value, strength=value);11.1.6 光照滤镜光照滤镜通过光照滤镜可以给标签设置光照效果，通过设置相应的属性值可以出现探照灯效果、暗淡光照效果、全辐射光照效果。光照滤镜（Light滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Light();11.1.7 翻转滤镜翻转滤镜所谓的翻转滤镜，顾名思义就是可以对标签的文字和图片进行翻转设置，包括水平翻转滤镜以及竖直翻转滤镜。水平翻转滤镜（FlipH滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.FlipH();竖直翻转滤镜（FlipV滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.FlipV();11.1.8 X光滤镜光滤镜使用了X光滤镜后会出现类似于X光照射物体后得到的照片的效果，就像医院使用X光来为病人拍照得到的照片一样。X光滤镜（Xray滤镜）的使用方法如下：filter: Xray();11.1.9 运动模糊滤镜运动模糊滤镜运动模糊滤镜的效果是在标签上添加某个方向的移动路径的线条那样，给人看上去有种运动的效果，就像是相机对运动的物体拍照后的效果一样。运动模糊滤镜（MotionBlur滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.MotionBlur(enabled=true|false,add=true|false,direction=value,strength=value);11.1.10 阴影滤镜阴影滤镜通过阴影滤镜设置可以渲染出颜色渐变的阴影效果，可以设置阴影的颜色、方向以及范围来呈现不同的效果。阴影滤镜（Shadow滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true|false,color=value,direction=value,strength=value);11.1.11 波浪滤镜波浪滤镜通过波浪滤镜可以渲染出波浪的效果，可以通过设置波浪的高度、个数等属性来呈现不同的效果。波浪滤镜（Wave滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true|false,add=true|false,freq=value,phase=value,strength=value,lightStrength=value);11.1.12 图片插入滤镜图片插入滤镜通过图片插入滤镜可以为标签添加额外的图片效果，类似于background-image属性的效果，另外图片插入滤镜还允许设置图片的大小。图片插入滤镜（AlphaImageloader滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.AlphaImageloader(enabled=true|false,sizingMethod=crop|image|scale,src=URL);11.1.13 渐变滤镜渐变滤镜渐变滤镜是极其重要的滤镜，通过它可以设置标签的背影颜色渐变效果。渐变滤镜（Gradient滤镜）是我们之前使用最多的滤镜方法，渐变滤镜的使用方法如下：filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true|false, GradientType=1|0，startColorStr=value, endColorStr=value);11.1.14 浮雕滤镜浮雕滤镜浮雕滤镜的效果就是将目标标签是样式设置得像浮雕一样，出现凸起或凹陷。浮雕滤镜（Engrave和Enboss滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Engrave(enabled=true|false,bias=value);filter:progid:DXImageTransform.Microsoft.Emboss(enabled=true|false,bias=value);11.2 动态滤镜动态滤镜11.2.1 门滤镜门滤镜11.2.2 栅栏滤镜栅栏滤镜11.2.3 棋盘滤镜棋盘滤镜11.2.4 渐刷滤镜渐刷滤镜11.2.5 消逝滤镜消逝滤镜11.2.6 虹滤镜虹滤镜11.2.7 内插滤镜内插滤镜11.2.8 像素化滤镜像素化滤镜11.2.9 随机线条滤镜随机线条滤镜11.2.10 旋转刷滤镜旋转刷滤镜11.2.11 随机转换滤镜随机转换滤镜11.2.12 随机溶解滤镜随机溶解滤镜11.2.13 螺旋滤镜螺旋滤镜11.2.14 滑动滤镜滑动滤镜11.2.15 剥除滤镜剥除滤镜11.2 动态滤镜动态滤镜11.2.16 拉伸滤镜拉伸滤镜11.2.17 齿轮滤镜齿轮滤镜11.2.18 之字形滤镜之字形滤镜11.2.1 门滤镜门滤镜所谓的门滤镜就是设置后的标签能像门一样打开和关闭，也就是新的样式效果会像门打开和关闭时那样出现。门滤镜（Barn滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Barn(enabled=true|false,duration=value, motion=out|in, orientation=vertical| horizontal);11.2.2 栅栏滤镜栅栏滤镜所谓的栅栏滤镜就是新的样式效果会像栅栏一样出现，也就是新的样式会间隔着出现。栅栏滤镜（Blinds滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Blinds(enabled=true|false,duration=value, bands=value, Direction=up|down| right|left);11.2.3 棋盘滤镜棋盘滤镜所谓的棋盘滤镜就是新的样式效果会像棋盘一样出现，也就是上下左右相邻着出现。棋盘滤镜（CheckerBoard滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.CheckerBoard(enabled=true|false,duration=value, squaresX=value, squaresY= value, Direction=up|down|right|left);11.2.4 渐刷滤镜渐刷滤镜所谓的渐刷滤镜就是标签的新样式逐渐改变的滤镜效果。棋盘滤镜（CheckerBoard滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.GradientWipe(enabled=true|false,duration=value, gradientSize=value, motion=forward|reverse);11.2.5 消逝滤镜消逝滤镜所谓的消逝滤镜就是标签新样式逐渐淡出而旧样式逐渐消失的样式变化效果。消逝滤镜（Fade滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Fade(enabled=true|false,duration=value,overlap=value);11.2.6 虹滤镜虹滤镜所谓的虹滤镜就是标签新样式以指定的形状出现，旧样式也以相同的形状消失的变化效果，这里所说的指定的形状包括：菱型、星型、圆形和方型等等。虹滤镜（Iris滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Iris(enabled=true|false, duration=value, irisStyle=PLUS |DIAMOND|CIRCLE| CROSS|SQUARE|STAR,motion=out|in);11.2.7 内插滤镜内插滤镜所谓的内插滤镜就是新的标签样式以一定方向插入，而旧样式被新样式覆盖的变化效果。内插滤镜（Inset滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Inset(enabled=true|false, duration=value );11.2.8 像素化滤镜像素化滤镜所谓的像素化滤镜就是标签的新样式以像素变大和模糊的方式变化，旧样式以相同的方式逐渐清晰出现的滤镜效果。像素化滤镜（Inset滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Pixelate( enabled=true|false, duration=value, maxSquare=value );11.2.9 随机线条滤镜随机线条滤镜所谓的随机线条滤镜就是新的标签样式以随机线条的形式出现，而旧的样式被覆盖新样式覆盖的变化。随机线条滤镜（RandomBars滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.RandomBars( enabled=true|false, duration=value, orientation=horizontal| vertical );11.2.10 旋转刷滤镜旋转刷滤镜所谓的旋转刷滤镜就是新的标签样式以时钟指针旋转的方式来刷除旧样式的变化。旋转滤镜（RadialWipe滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.RadialWipe( enabled=true|false, duration=value, wipeStyle=CLOCK|WEDGE|RADIAL );11.2.11 随机转换滤镜随机转换滤镜所谓的随机转换滤镜就是在某个指定的变化集合里选择某个变化效果的滤镜功能，当然该指定的变化是要通过transition属性进行设置的，而不真的是随机的。随机转换滤镜（RevealTrans滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.RevealTrans( enabled=true|false, duration=value, transition=value );11.2.12 随机溶解滤镜随机溶解滤镜所谓的随机溶解效果就是新的标签样式以随机点出现，旧样式被新样式覆盖的变化。随机溶解滤镜（RandomDissolve滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.RandomDissolve( enabled=true|false, duration=value );11.2.13 螺旋滤镜螺旋滤镜所谓的螺旋滤镜就是新的标签样式效果以螺旋状出现，旧样式被新样式覆盖的变化。螺旋滤镜（Spiral滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Spiral( enabled=true|false, duration=value, gridSizeX=value, gridSizeY=value );11.2.14 滑动滤镜滑动滤镜所谓的螺旋滤镜就是新的标签样式效果以滑动的方式出现，旧样式被新样式覆盖的变化。滑动滤镜（Slide滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Slide( enabled=true|false, duration=value, bands=value, slideStyle=HIDE|PUSH|SWAP );11.2.15 剥除滤镜剥除滤镜所谓的剥除滤镜就是旧的标签样式以剥除的方式消失，新样式逐渐出现的变化。剥除滤镜（Strips滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Strips( enabled=true|false, duration=value,motion=leftdown|leftup| rightdown|rightup );11.2.16 拉伸滤镜拉伸滤镜所谓的拉伸滤镜就是新的标签样式效果以拉伸的方式出现，旧样式被新样式覆盖的变化。拉伸滤镜（Stretch滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Stretch( enabled=true|false, duration=value, stretchStyle=SPIN|PUSH|HIDE );11.2.17 齿轮滤镜齿轮滤镜所谓的齿轮滤镜就是新的标签样式效果以齿轮辐射状出现，旧样式被新样式覆盖的变化。齿轮滤镜（Wheel滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.Wheel( enabled=true|false, duration=value, spokes=value );11.2.18 之字形滤镜之字形滤镜所谓的之字形滤镜就是新的标签样式效果以之字形状来回出现，旧样式被新样式覆盖的变化。之字形滤镜（ZigZag滤镜）的使用方法如下：filter:progid:DXImageTransform.Microsoft.ZigZag( enabled=true|false, duration=value, gridSizeX=value, gridSizeY=value );
