BlendTrans濾鏡比起上一篇介紹的Revealtrans濾鏡來要簡單一些，它只有一個參數：Duration 變換時間，它的功能也比較單一，就是產生一種淡入淡出的效果，不過它的這種效果比起RevealTrans濾鏡的淡入淡出效果來要精細的多，你看看下面也就不言而喻了。
由于是動態轉換，上面只是我抓的三張圖片，只能幫助你了解其轉換過程，真正的效果只有待你按我下面講的方法動手做出來才能看到。使用BlendTrans濾鏡也和Revealtrans濾鏡一樣，需要借助于Javascript來調用它的方法來實現，我們現在就以實現上面這種效果為例來看看如何使用 BlendTrans濾鏡，首先你必須準備幾張同樣大小的圖片。
制作方法：
1、用老辦法（前面的文章已介紹了多次）制作一個BlendTrans濾鏡，取名為“myblen"，Duration設置為“3"（即轉換時間為3秒），濾鏡設置好后，在網頁源代碼的< head >與< /head >之間將有下面這樣的代碼：
< style type="text/css" >
< !--
.myblen { filter:blendTrans(Duration=3)}
-- >
< /style >
2、插入第一張圖片，在圖片的屬性面板上給圖片加個名稱：myimg；
3、把BlendTrans濾鏡加載到圖片上；這時圖片的“img"標記的代碼是這樣的：< img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg">；
4、在網頁的源代碼< head >與< /head >之間插入下面這段Javascript程序：
< script language="JavaScript" >
< !--
// 獲取數組記錄數
function ImgArray(len)
{
this.length=len;
}
// 申明數組并給數組元素賦值，也就是把圖片的相對路徑保存起來，若是圖片較多，可增加數組元素的個數，
// 我在這個例子中只用了三張圖片，所以數組元素個數為“3"。
ImgName=new ImgArray(3);
ImgName[0]="image/cssp2.jpg";
// 你在制作時要把這里的"image/cssp2.jpg"換成你的圖片所在的路徑和圖片文件名；
ImgName[1]="image/cssp3.jpg";
// 你在制作時要把這里的"image/cssp3.jpg"換成你的圖片所在的路徑和圖片文件名；
ImgName[2]="image/cssp1.jpg";
// 你在制作時要把這里的"image/cssp1.jpg"換成你的圖片所在的路徑和圖片文件名；
var i=1;
// 演示變換效果
function playImg()
{
if (i==2)
{ i=0 ;}
else
{ i++; }
myimg.filters[0].apply(); // 這里的“myimg”是你在網頁中插入的那張圖片的代號，
myimg.src=ImgName[i]; // 當你改變了插入的圖片代號時，這里也一定要改變，
myimg.filters[0].play(); // 否則，程序在變換時可就找不著北了。
// 設置演示時間，這里是以毫秒為單位的，所以“6000"是指每張圖片的演示時間是6秒鐘，這個時間值要在于
// 濾鏡中設置的轉換時間值，這樣當轉換結束后還停留一段時間，讓人看清楚圖片。
mytimeout=setTimeout("playImg()",6000);
}
-- >
< /script >
5、在網頁源代碼的< body >加入這樣的一句代碼：onload="playImg()"。
好了，快按F12欣賞你的杰作吧。
若是想在圖片上獲得上一篇介紹的RevealTrans濾鏡效果，只要把本例中的濾鏡代碼換一換就行了，動手試試吧！