DIV+CSS CSS滤镜的应用.pptVIP

Tankertanker Design Tankertanker Design CSS滤镜的应用 第八讲 CSS滤镜 8.1 滤镜简介 8.2 通道Alpha滤镜 8.3 模糊Blur 滤镜 8.4 运动模糊(MotionBlur) 8.5 透明色(Chroma) 8.6 反转变换(Flip) 8.7 光晕(Glow) 8.8 灰度(Gray) 8.9 反色(Invert) 8.10 遮罩(Mask) 8.11 阴影(Shadow) 8.12 X射线(X-ray) 8.13 浮雕纹理(Emboss和Engrave) 8.14 波浪(Wave) 第八讲 CSS滤镜 8.1 滤镜简介 Css滤镜的标识符式“filter”，总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。 可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的则称为高级滤镜。 CSS滤镜的标识符是：filter 语法： filter：filtername（parameters） 进行滤镜之前必须定义filter filtername是滤镜名，parameters是滤镜参数 在CSS样式中，提供了filter（滤镜效果），它可以对文字、图片、表格等确定范围的HTML标记设置滤镜效果 8.2 Alpha滤镜 通道（alpha） Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 参数 说 明 Opacity 代表透明度等级，可选值0-100，0代表完全透明，100代表完全不透明 FinishOpacity 可选项，设置结束时的透明度，制作渐变效果，可选值0-100 Style 指明区域的形状特征，0代表统一形状，1代表线性，2代表圆形放射渐变，3代表矩形反射渐变，当style为2或3时，StartX，StartY就无意义 StartX，StartY 代表透明效果的开始坐标，坐标值是百分比，取值范围0-100 FinishX,FinishY 代表透明效果的结束坐标，坐标值是百分比，取值范围0-100 8.3 Blur滤镜 参数 说 明 makeshadow 有true和false两个值，用来指定是否有阴影效果 pixelradius 表示模糊作用深度 shadowpacity 表示阴影透明度 模糊（blur） Blur(makeshadow=？, pixelradius=？, shadowpacity=？); 8.4 运动模糊(MotionBlur) 参数 说 明 Add 有true和false两个值，用来指定是否叠加原图片 Direction 设置模糊的方向，模糊效果按顺时针方向进行。0度代表垂直向上，默认值270度 Strength 使用整数指定，代表有多少像素的宽度受到模糊影响，默认值5px 运动模糊(MotionBlur) Blur(Add=？, Direction=？, Strength=？); 其中：参数direction用于设定动态模糊效果的方向，总单位为360°，0代表垂直向上，并以每45°为一个单位，而度数以方向定位时，将如下图所示。 8.5 透明色(Chroma) 透明色（Chroma） Chroma(enablrd=? ,Color=?) 有true和false两个值，用来指定是否应用滤镜 enabled 参数 说 明 Color 使某一个特定的颜色透明，此参数就代表它的颜色值 8.6 反转变换(Flip) FlipH滤镜是设置对象产生水平翻转180°，即左右相反的效果；而FlipV滤镜是设置对象产生垂直翻转180°，即上下颠倒的效果。 这两个滤镜的基本语法如下： filter:FlipH filter:FlipV 这两个滤镜没有参数。 8.7 光晕(Glow) 参数 说 明 Color 指定发光的颜色 Strength 指定发光的强度，参数值从1-255 光晕（Glow） Glow(Color=?, Strength=?) 8.8 灰度(Gray) 灰度（Gray） filter:Gray; 8.9 反色(Invert) 反色（invert） filter:invert; 8.10 遮罩(Mast) 参数 说 明 Color 用来指定使用什么颜色作为掩膜，建议用gif图片 遮罩（mask） mask(Color=?) 8.11 阴影(Shadow) True为任何非透明像素建立可见投影，false