欢迎来到天天文库
浏览记录
ID:43090716
大小:4.33 MB
页数:71页
时间:2019-09-29
《html+css+javascript 标准实例教程(第二版)21》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、本书编委会编著实例版第21章滤镜特效的应用21.1设置透明度——alpha21.2添加模糊效果——blur21.3设置水平/垂直翻转——fliph/flipv21.4设置灰度——21.5设置反转——21.6设置X射线效果——xray21.7设置波浪效果——wave21.8设置阴影——dropshadow21.9设置边缘光晕效果——glow21.10设置遮罩——mask21.11设置渐变阴影——shadow21.12设定颜色透明——chroma21.13小实例——滤镜的综合应用HTML/CSS/JavaScript标准教程实例版(第2版)第21章滤镜特
2、效的应用基本语法filter:滤镜属性(参数1,参数2,……)第21章滤镜特效的应用语法说明filter是滤镜属性选择符。滤镜属性包含有好多种,本章主要介绍的如表21-1。参数值就是属性值,用来反映属性效果的,具体各个滤镜属性的参数值将在后面详细介绍。第21章滤镜特效的应用表21-1滤镜属性表21.1设置透明度——alpha基本语法filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=f
3、inishy)21.1设置透明度——alpha语法说明——alpha属性包含的参数说明21.1设置透明度——alpha实例代码21.1设置透明度——alpha接上页21.1设置透明度——alpha接上页21.1设置透明度——alpha网页效果21.1设置透明度——alpha提示在运行含有滤镜属性的代码时,浏览器会出现一个信息栏提示您InternetExplorer阻止了一些不安全的内容。这时您只要单击信息栏的“确定”按钮,然后再右键单击靠近浏览器顶端的信息,从快捷菜单选择“允许阻止的内容”即可看到滤镜的效果。21.2添加模糊效果——blur基本语法filter:blur(add
4、=add,direction=direction,strength=strength)21.2添加模糊效果——blur语法说明blue属性包含的参数说明见表21-3。动态模糊的方向是以45°为一个单位,所以如果设置的方向度数不是45的倍数的话,浏览器就会以其最接近的45倍数来设置模糊度数。如,设置了direction=160,实际浏览器是以180°来显示模糊方向的。21.2添加模糊效果——blur表21-3blue滤镜参数说明21.2添加模糊效果——blur实例代码21.2添加模糊效果——blur接上页21.2添加模糊效果——blur网页效果21.3设置水平/垂直翻转——f
5、liph/flipv基本语法filter:fliphfilter:flipv21.3设置水平/垂直翻转——fliph/flipv语法说明fliph和flipv两个属性都没有参数,可以直接引用。21.3设置水平/垂直翻转——fliph/flipv实例代码21.3设置水平/垂直翻转——fliph/flipv接上页21.3设置水平/垂直翻转——fliph/flipv网页效果21.3设置水平/垂直翻转——fliph/flipv提示在实际应用过程中,水平翻转和垂直翻转滤镜属性也可以同时使用。其语法为:filter:fliphflipv;两个属性中间用空格隔开,代表水平垂直翻转。21.4
6、设置灰度——基本语法filter:gray21.4设置灰度——实例代码21.4设置灰度——接上页21.4设置灰度——网页效果21.6设置X射线效果——xray基本语法filter:xray21.6设置X射线效果——xray实例代码21.6设置X射线效果——xray接上页21.6设置X射线效果——xray网页效果21.6设置X射线效果——xray实例代码21.6设置X射线效果——xray接上页21.6设置X射线效果——xray网页效果21.7设置波浪效果——wave基本语法filter:wave(add=true(false),fr
7、eq=频率,lightstrength=光强,phase=偏移量,strength=强度)21.7设置波浪效果——wave语法说明——wave属性包含的参数说明21.7设置波浪效果——wave实例代码21.7设置波浪效果——wave接上页21.7设置波浪效果——wave网页效果21.8设置阴影——dropshadow基本语法filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)21.8设置阴影——dropsha
此文档下载收益归作者所有