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

最新推荐文章于 2021-06-04 06:32:38 发布

原创最新推荐文章于 2021-06-04 06:32:38 发布 · 7.9k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#filter #css #border #table #function #firefox

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用Blendtrans滤镜实现图片间的平滑过渡效果，并展示了如何将其应用于图片轮播及菜单栏的设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<html>

<head>

<script type="text/javascript">

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

// 我在这个例子中只用了三张图片，所以数组元素个数为“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>

<style type="text/css">

<!--

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

-->

</style>

</head>

<body onload="playImg();">

<img src="http://tech.china.com/zh_cn/netschool/homepage/css/600/20001127/07-1.jpg" class="myblen" id="myimg" align="left">

</body>

</html>

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

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

<HTML>

<HEAD>

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

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<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>

<script>

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>

<table class="xmenu" id="xmenu0" border="0" width="944" cellspacing="1" cellpadding="1" height="30" id="table5">

<tr>

<td>首页</td>

<td >新闻中心</td>

<td>下载中心</td>

<td>留言板</td>

<td>关于</td>

</tr>

</table>

<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>

</BODY>

</HTML>

评论 4

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。