鼠标与滤镜要点.pptVIP

鼠标与滤镜 一、鼠标的设置 二、滤镜的使用 三、网页渐变背景色 重点难点 一、鼠标的设置 1、设置光标形状 语法： body{ cursor：“光标形状” } 参考1鼠标样式.html 2、自定义光标样式 语法： a:hover { cursor:url(images/c_02.ani) ; url（文件位置） } 参考2鼠标样式.html 二、滤镜的使用 语法： Filter：滤镜名称（参数1，参数2，……） 注意： 将滤镜应用于文本时，要给文本设置宽高 p { font:60px 黑体; width:300;height:100; filter:blur(add=1,direction=45,strength=10);} 滤镜分类： 视觉滤镜和转换滤镜 1、alpha滤镜—透明滤镜 filter:alpha(opacity= ,finishopacity= ,style= ) 参数值： opacity：开始时的透明度0透明~100不透明 finishopacity：结束时的透明度 style：渐变形状：0无 1线性 2放射性 3菱形 startX：开始的X坐标 startY：开始的Y坐标 finishX：结束时的X坐标 finishY：结束时的Y坐标 参考3alpha滤镜.html 小技巧： 在做网页时常用到鼠标经过图像效果，可以用js表现，也可以用如下的滤镜： body{background:#000;} img {filter: alpha(opacity=60); } a:hover img {filter: alpha(opacity=100); } a href=#imgsrc=“one.jpg/a 参考4alpha滤镜.html 2、blur滤镜—模糊滤镜 filter:blur(add= ,direction= ,strength= ) add: 0不显示原对象 1显示原对象（默认） direction:方向，总为360度，默认270度 strength:速度，默认5px 0 45 90 135 180 225 270 315 参考5 blur模糊滤镜.html 3、dropshadow--阴影滤镜 filter:dropshadow(color= ,offx= ,offy= ), color:阴影的颜色 offx：水平方向偏移,正值往右，负值往左 offy：垂直方向偏移,正值往下，负值往上 positive：0透明 1不透明（默认） 参考6、7 dropshadow阴影滤镜.html 4、glow--发光滤镜 filter:glow(color= ,strength= ) clolr:发光颜色 strength：强度（1~255） 参考8发光滤镜.html 5、gray—去色、invert—颜色反向、xray—x光片 语法： .one { filter : gray; } .two { filter : invert; } .three { filter : xray; } 参考9 gray去色 invert颜色反向 xrayX光片.html 6、flipH—水平翻转、flipV—垂直翻转 .flip1{ filter:fliph;} .flip2{ filter:flipv;} 参考10 flipH水平flipV垂直翻转.html 7、wave—波浪滤镜 filter:wave(add= ,freq= ,lightstrength= ,phase= ,) add: 0不显示原对象(默认) 1显示原对象 freq:波浪数目 strength：振幅大小，单位像素 lightstrength：波浪上光的强度（0~100） phase:正弦波的起始位置0~100（0度~360度） 参考11 wave波浪.html 8、shadow—阴影渐变滤镜 filter:shadow(color= ,direction= ) color:要变为透明的颜色 direction：阴影的方向 参考12 shadow阴影渐变.html 9、mask—遮罩滤镜 filter:mask(color= ) color:显示颜色 参考13 mask遮罩滤镜.html