一、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" οnclick="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>
除了文字外,圖片是不是也能實現這種混合效果呢?答案是肯定的。下一節將向您
介紹圖片的混合轉換濾鏡效果和顯示轉換濾鏡效果。
二、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表示離開網頁,記得點擊鏈接試試。