|
|
CSS特效赏析
CSS特效赏析
1.动态改变样式
2.动态可视化效果
3.动态滤镜显示
4.Blentrans属性
5.Revealtrans属性
6.动态Glow属性
7.显示和隐藏
8.兼容两种浏览器
9.移动对象
10.对象的滑动
11.键盘控制对象
12.鼠标控制对象
13.Clip属性的应用
14.动态文字变换
15.动态改变页面样式
16.动态时钟控制
17.倒计时
18.动态刷新
|
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>
除了文字外，图片是不是也能实现这种混合效果呢？答案是肯定的。下一节将向您
介绍图片的混合转换滤镜效果和显示转换滤镜效果。
上一实例 下一实例
|
|