css動態濾鏡

一、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表示離開網頁,記得點擊鏈接試試。
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章