站长学堂
你的位置: 中国个人站长站 -- 站长学堂 -- 网页制作 -- HTML/CSS教程 -- 文章正文 Blentrans属性
推荐位

Blentrans属性

中国个人站长站 HTML/CSS教程 点击数: 更新时间:2004-10-29 9:27:52
Blentrans属性

  本节介绍一种特效,它应用到的是CSS中的混合转换滤镜blendtrans。请您先看一下
下面这个例子:

  滤镜效果

  使用方法 请单击这里使文字淡出,再次单击后可以使文字逐渐出现。

  我们为这段文字加上的逐渐淡出的多媒体效果。

  看到了吗?这是一种淡入淡出的效果。让我们来看一下而这种效果用到的转换属性
blendtrans的语法:

  Filter:BlendTrans(duration=淡入或淡出的时间,以秒作单位)

  我们看到了BlendTrans属性只有一个属性值duration,它指定了对象淡入淡出的时
间。

  上面的例子的源代码如下所示:

  <html>
  <head>
  <title> dhtml</title>
  <style>
  <!--
  em{color:red;cursor:hand;font-size:14pt}
  -->
  </style> </head>
  <body>
  <h1>滤镜效果</h1>
  <p><strong>使用方法</strong>
  <span id="text4" onclick="curobj=inner3;togglemultimedia()">
  请单击<b><em style="color:red">这里</em></b>使文字淡出,
  再次单击后可以使文字逐渐出现。</p>
  <div id="inner3" style="width:100%;color:red;             
  filter:blendtrans(duration=3)">
  <p> 我们为这段文字加上的逐渐淡出的多媒体效果。</span></p> </div>
  <script language="javascript">
  <!--
  var curobj;
  function togglemultimedia(){
  if (curobj.filters(0).status==2){ curobj.filters(0).stop();
  if (curobj.style.visibility=="hidden")
  curobj.style.visibility="visible";
  else curobj.style.visibility="hidden";                 
  window.settimeout("togglemultimedia()",1); }
  curobj.filters(0).apply();
  if (curobj.style.visibility=="hidden")                 
  curobj.style.visibility="visible";
  else curobj.style.visibility="hidden"; curobj.filters(0).play(); }
  -->
  </script> </body>
  </html>

  除了文字外,图片是不是也能实现这种混合效果呢?答案是肯定的。下一节将向您
介绍图片的混合转换滤镜效果和显示转换滤镜效果。  

佚名 文章录入:humianzhizhou    责任编辑:swh 
个人站长站与你风雨同舟!
本站所提供的资源均来源于互联网,如有侵权行为,请与本站管理员联系,我们会第一时间删除!
·如果您发现《Blentrans属性》文章有错误,也请通知我们修改!
联系邮箱chinageren#126.com,谢谢支持!
站内搜索:
广告服务 | 友情链接 | 联系我们 | 免责声明 | 用户留言 | 网站导航
版权所有:中国个人站长站 2007-2008 未经授权禁止复制或建立镜像 客服QQ号:112731235
copyright © 2007-2008 www.ChinaGeRen.com online services. all rights reserved. 苏ICP备05000059号