|
CSS特效赏析
上一实例 下一实例
4、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> 除了文字外，图片是不是也能实现这种混合效果呢？答案是肯定的。下一节将向您
介绍图片的混合转换滤镜效果和显示转换滤镜效果。
上一实例 下一实例 
谈谈您的看法
| 
当前位置：学海荡舟 -> 电脑乐园 -> CSS特效赏析