css滤镜之light实现的灯光效果.
效果图:
源码: 保存为html文件, 在IE6及以上版本IE浏览器可以运行....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Light滤镜</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
border: 1px solid gray;
}
#light {
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light();
background: #FFFFFF;
}
</style>
</head>
<body>
<center>
<div id="light">
</div>
</center>
</body>
</html>
<script type="text/javascript">
var light = document.getElementById('light');
light.filters.item('DXImageTransform.Microsoft.Light').addCone(0, 0, 1, 400, 150, 0xFF, 0x00, 0x00, 80, 5);
light.filters.item('DXImageTransform.Microsoft.Light').addCone(400, 0, 1, 0, 150, 0x00, 0xFF, 0x00, 80, 5);
light.filters.item('DXImageTransform.Microsoft.Light').addCone(0, 300, 1, 400, 150, 0x00, 0x00, 0xFF, 80, 5);
light.filters.item('DXImageTransform.Microsoft.Light').addCone(400, 300, 1, 0, 150, 0xFF, 0xFF, 0xFF, 80, 5);
light.filters.item('DXImageTransform.Microsoft.Light').addAmbient(0xEE, 0xEE, 0xEE, 80);
light.onmousemove = (function() {
light.filters.item('DXImageTransform.Microsoft.Light')
.moveLight(0, event.clientX - this.offsetLeft + 50, window.event.clientY - this.offsetTop - 50, 1, true);
light.filters.item('DXImageTransform.Microsoft.Light')
.moveLight(1, event.clientX - this.offsetLeft - 50, window.event.clientY - this.offsetTop - 50, 1, true);
light.filters.item('DXImageTransform.Microsoft.Light')
.moveLight(2, event.clientX - this.offsetLeft + 50, window.event.clientY - this.offsetTop + 50, 1, true);
light.filters.item('DXImageTransform.Microsoft.Light')
.moveLight(3, event.clientX - this.offsetLeft - 50, window.event.clientY - this.offsetTop + 50, 1, true);
});
</script>