您的位置：首页 > Web前端 > CSS

css动态滤镜

2010-10-28 17:12 246 查看

一、Blentrans属性

　　本节介绍一种特效，它应用到的是CSS中的混合转换滤镜blendtrans。请您先看一下
下面这个例子：
　　滤镜效果
　　使用方法 请单击这里使文字淡出，再次单击后可以使文字逐渐出现。
　　我们为这段文字加上的逐渐淡出的多媒体效果。

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

　　Filter：BlendTrans（duration=淡入或淡出的时间，以秒作单位)

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

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

　　<html>
　　<head>
　　<title> dhtml</title>
　　<style>
　　
　　</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">
　　
　　</script> </body>
　　</html>

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

二、RevealTrans属性

　　上一节我们介绍了混合转换滤镜的一个例子，本节我们来看一下RevealTrans属性
，RevealTrans属性提供了更加多变的转换效果，大家看到的进入或离开网站的换页效果就是用它做出来的，写格式是这样的：
　　Filter:revealtrans(duration=转换的秒数，transition=转换的类型）
　　表达式中的transition参数的参数值有24中，以代号0-23来表示，分别代表24中显
示类型，具体的参数值列表如下图所示：

例如：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cnzz.cc 动态滤镜RevealTrans换页效果演示</title>
<meta http-equiv="page-Enter" content="RevealTrans(Duration=2, Transition=12)" />
<meta http-equiv="page-exit" content="RevealTrans(Duration=2, Transition=23)" />
</head>
<body>
<p>站长学字www.cnzz.cc欢迎大家,我是站长阿欣,为了使效果更加明显,请大家多复制些文字.</p>
<p><a href="http://www.baidu.com"><strong>进点击入百度www.baidu.com</strong></a></p>
</body>
</html>

把上面的代码复制到你的网页中去，预览一下，试试，不错吧，看到了吗，代码加<Head>和</Head>之间，Page-Enter表示进入网页，Page-Exit表示离开网页，记得点击链接试试。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航