使用filter完成的漂亮的CSS渐变特效——blendtrans

来源：互联网发布：美工专业培训班编辑：程序博客网时间：2024/06/04 23:33

再说神奇的 filter 滤镜，不过要提醒大家的就是在 firefox 下面不能使用 filter

blendtrans的设置特别简单，就是设置一个转换时间：
filter:blendtrans(duration=3)
单位是秒
这次用 blendtrans 来实现渐变成另外一幅图，先粘贴到记事本里面保存成html看看效果再看代码吧：

<html>

<head>

// 申明数组并给数组元素赋值，也就是把图片的相对路径保存起来，若是图片较多，可增加数组元素的个数，

// 我在这个例子中只用了三张图片，所以数组元素个数为“3"。

ImgName = new Array(2);

ImgName[0]="http://tech.china.com/zh_cn/netschool/homepage/css/600/20001127/07-1.jpg";

ImgName[1]="http://tech.china.com/zh_cn/netschool/homepage/css/600/20001127/07-3.jpg";

var i=0;

// 演示变换效果

function playImg()

{

if(i==1)

{i=0;}

else

{ i++; }

var myimg = window.document.getElementById('myimg');

myimg.filters[0].apply(); // 这里的“myimg”是你在网页中插入的那张图片的代号，

myimg.src=ImgName[i]; // 当你改变了插入的图片代号时，这里也一定要改变，

myimg.filters[0].play(); // 否则，程序在变换时可就找不着北了。

// 设置演示时间，这里是以毫秒为单位的，所以“6000"是指每张图片的演示时间是6秒钟，这个时间值要在于

// 滤镜中设置的转换时间值，这样当转换结束后还停留一段时间，让人看清楚图片。

mytimeout=setTimeout("playImg()",6000);

}

</script>

<!--

.myblen{filter:blendtrans(duration=3)}

-->

</style>

</head>

</body>

</html>

这个只是个基础演示，最实际的用途就是拿它来做漂亮的菜单，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> 使用blendtrans做的菜单栏 </TITLE>

<STYLE>

<!--

.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:none;color:#333333;border:1px solid #ffffff;background:#f6f6f6;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}

-->

</STYLE>

function attachXMenu(objid){

var tds=objid.getElementsByTagName('td');

for(var i=0;i<tds.length;i++){

with(tds[i]){

onmouseover=function(){

with(this){

filters[0].apply();

style.background='#64A1DE'; //这是鼠标移上去时的背景颜色

style.border='1px solid #ffffff'; //边框

style.color='#ffffff'; //文字颜色

filters[0].play();

}

onmouseout=function(){

with(this){

filters[0].apply();

style.background='#f6f6f6'; //这是鼠标离开时的背景颜色

style.border='1px solid #ffffff'; //边框

style.color='#333333'; //文字颜色

filters[0].play();

}

</script>

</HEAD>

<BODY>

<tr>

</tr>

</table>

</BODY>

</HTML>