您的位置：首页 > Web前端 > CSS

css3高级滤镜-光照滤镜

2016-05-04 13:24 387 查看
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<h1 style="color:blue">高级滤镜指需要配合JavaScript语言，产生变换效果的滤镜</h1>

<h1>光照(Light)滤镜</h1>

<ul>语法格式：

<li>filter：Light(enabled=ienabled)</li>

</ul>

<ul>参数介绍：

<li>1.AddAmbIE9.0nt:加入包围的光源</li>

<li>2.AddCone:加入锥形光源</li>

<li>3.AddPoint:加入点光源</li>

<li>4.Changcolor:改变光的颜色</li>

<li>5.ChangStrength:改变光的强度</li>

<li>6.Clear：清除所有的光源</li>

<li>7.MoveLight:移动光源</li>

</ul>

<ul>

<table>

<tr>

<td style="color: blue;font-weight:bolder;">随鼠标变化的动态光源效果</td>

</tr>

<tr>

<td id="light" style="filter:Light();width:200px"><img src="img/11.jpg"></td>

</tr>

</table>

</ul>

<script>

var g_numlights=0;

//调用设置光源的函数

window.onload=setlights;

//获得鼠标的句柄

light.onmousemove=mousehandler;

//建立光源的集合

function setlights(){

light.filters[0].clear();

light.filters[0].addcone(0,0,5,100,100,255,255,0,60,30);

}

//捕捉鼠标的位置来移动光线焦点

function mousehandler(){

x=window.event.x-80;

y=window.event.y-80;

light.filters[0].MoveLight(0,x,y,5,1);

}

</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航