css滤镜之light实现的灯光效果.

来源：互联网发布：sdl fcc amc输出数据编辑：程序博客网时间：2024/06/06 04:48

效果图:

源码: 保存为html文件, 在IE6及以上版本IE浏览器可以运行....

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Light滤镜</title>

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>

</div>

</center>

</body>

</html>

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>