導航:首頁 > 萬維百科 > 網頁設計中文字濾鏡投影

網頁設計中文字濾鏡投影

發布時間:2021-01-29 04:14:04

1、網頁設計 CSS RevealTrans濾鏡

下面代碼放在網頁head區域,兩行一行是進入網頁、一行是離開時:

<meta http-equiv="page-enter" content="revealtrans(ration=3,transition=23)">
<meta http-equiv="page-exit" content="revealtrans(ration=3,transition=23)">

ration=3 是設置效果時間為3秒

transition = 23 是切換效果

--------------------------------------------------
矩形從大至小 0 隨機溶解 12
矩形從小至大 1 從上下向中間展開 13
圓形從大至小 2 從中間向上下展開 14
圓形從小至大 3 從兩邊向中間展開 15
向上推開 4 從中間向兩邊展開 16
向下推開 5 從右上向左下展開 17
向右推開 6 從右下向左上展開 18
向左推開 7 從左上向右下展開 19
垂直形百葉窗 8 從左下向右上展開 20
水平形百葉窗 9 隨機水平細紋 21
水平棋盤 10 隨機垂直細紋 22
垂直棋盤 11 隨機選取一種特效 23

2、本人是外行不懂網頁設計,請問大神如何用css設置瀏覽器半透明?求詳細步驟。

瀏覽器是不能設置半透明的,除非瀏覽器廠商提供了半透明選項,像迅雷版7一樣可以設置權半透明背景,不知道你所說的是不是網頁半透明,那就在CSS里給你想實現半透明的添加樣式
opacity:.5;
filter:Alpha(opacity = 50);

3、網頁設計中javascript——濾鏡效果

HTML基本代碼,咱不多說,相信你也懂……
說說JS部分,
變數 i 是用來代表將要上場的圖片的,【document.getElementById("img1").src="img/"+i+".jpg"; //設置該圖片容器中的圖片,根據I的值修改圖片】這段代碼控制上場的圖片,(這里也有個要求,就是要求你希望上場的圖片的名都是類似1.jpg、2.jpg、3,jpg、4.jpg……這樣的規則的,並且是放在img這個目錄下的)。
【if(i>11) {i=1;} 】這段開始部分的代碼,意味著,將要上場的圖片最多是11張;
變數 j 是用來代表濾鏡效果類型的,所以【var j=Math.random()*22+1;//圖片隨機產生】這個的注釋是錯誤的,應該是「控制濾鏡效果隨機產生」。
接下來,【document.getElementById("img1").style.filter="RevealTrans (Transition="+j+")"; //設置IMG1這個放圖片的容器的動態隨機濾鏡效果】正如注釋所寫,是為IMG1這個容器添加濾鏡效果的。假如,j=20,那代碼不就是【document.getElementById("img1").style.filter="RevealTrans (Transition=20)"; 】了?其中【.style.filter="RevealTrans (Transition=20)"】就是添加濾鏡的關鍵代碼,函數RevealTrans和其參數Transition,你需要再多去看看相關資料就能明白了。
IE下的濾鏡變換效果有很多,似乎總共有22種,這里Transition=20就是選擇其中的一種而已嘛,就這么簡單。
【document.getElementById("img1").src="img/"+i+".jpg"; 】就是為IMG1這個容器添加圖片,不多解釋了。
總之,JS部分的代碼實現兩個功能,第一是為IMG1添加濾鏡效果並應用和啟動這個效果,第二是添加圖片(也就是圖片的地址嘛)。你對不懂的地方,我想應該是容器的 filter 屬性,你需要自己去查看相關資料了。

最後我要提醒你的是,這個濾鏡效果只有在IE下有效,別的瀏覽器是沒任何效果的。

補充:
+i+、+j+:這里的加號是鏈接符,表示把兩邊的字元串鏈接起來;
看源代碼中, "img/"+i+".jpg",這里的 i 不就是個變數而已嘛,假如現在i=5,那麼這段代碼不就是 "img/"+5+".jpg",最後的結果就是 "img/5.jpg"。
「+」號能作為算術運算符,也能作為字元串的鏈接符,例如++i,j++就是算術運算符,產生的結果是變數自加1吧,又例如"abc"+"def"就是字元串鏈接符,產生的結果就是把這兩個字元串鏈接起來,結果是"abcdef"。

如果這塊你看不懂,我覺得你的程序基礎知識似乎還差不少啊,再多看看

4、revealtrans 關於網頁設計的 濾鏡

這個是js的轉換濾鏡裡面的revealTrans濾鏡
imgInit.filters.revealTrans.Transition=23; // 這個表示隨機圖像轉換的形式,就是在0~22的變換方版式之中隨權即抽一種

imgInit.filters.revealTrans.apply(); // 這一個是捕獲對象內容的初始顯示,為變換做准備

playTran(); // 應該是你的js中的某一個函數,這個函數開始對圖像做出變換

document.images.imgInit.src=imgUrl[i]; // 設置每一張圖片的載入路徑

5、網頁設計Dreamweaver中CSS濾鏡的 陰影效果和光照效果 顯示出問題。

css濾鏡並不是所有都兼容。

6、如何用Dreamweaver MX製作文字特效

我們常用的網頁製作工具Dreamweaver MX不僅可以製作網頁,而且利用其中的CSS濾鏡我們還可以對文字或圖片進行簡單的特效處理。下面我們就通過幾個例子來看一看在Dreamweaver中是如何製作特效文字的。
光暈字
首先啟動Dreamweaver,在新文檔中插入一個1×1的表格,邊框設置為0,然後在其中輸入需要修飾的文字。
單擊右面的浮動面板中的「設計→CSS樣式」打開這一浮動面板。
面板右下角的四個按鈕分別是:添加、新建、編輯以及刪除CSS樣式。
注意:在Dreamweaver中,CSS濾鏡只能作用於有區域限制的對象,如表格、單元格、圖片等,而不能直接用於文字,所以我們要把所需要增加特效的文字事先放在表格中,然後對表格應用CSS樣式,從而使文字產生特殊效果。

(圖1 新建CSS樣式)
單擊新建CSS樣式按鈕,彈出如圖1的對話框。
「類型」項選擇「創建自定義樣式」,「定義在」選擇「僅對該文檔」,點確定後彈出CSS樣式定義對話框(如圖2),在類型面板中我們可以定義字體、字型大小、顏色等內容,本例中我們選擇字體為隸書,大小50像素,顏色為白色。

(圖2 定義CSS樣式)
要產生文字特效,最重要的是在擴展面板(如圖3)中的設置,在「視覺效果下」的過濾器中列出的就是所有的CSS濾鏡,選擇Glow濾鏡,它可以使文字產生邊緣發光的效果。Glow濾鏡的語法格式為:Glow(Color=?, Strength=?),裡面有兩個參數:Color決定光暈的顏色,可以用如ffffff的十六進制代碼,或者用Red、Yellow等單詞表示;Strength表示發光強度,范圍從0到255。本例中我們設置顏色為紅色(Red),發光強度為8,然後確定。

(圖3 設置好Glow濾鏡)
下面我們將這個CSS樣式應用到表格中。把游標移到單元格中,在文檔窗
口左下角點擊標簽選中單元格,然後單擊剛才在CSS樣式面板中新建的樣式,這時標簽變為,表明已經對單元格應用了CSS樣式。我們在文檔窗口中看不出變化,按F12鍵在IE中預覽,效果就出來了(如圖4)。

(圖4 光暈字效果)
怎麼樣?不次於在Photoshop中的濾鏡效果吧。在網頁里放上幾個這樣的特效字會讓網頁美觀不少,而且我們也可以用PrintScreen鍵抓屏,然後在畫圖程序中粘貼保存使之成為單獨的圖片。
陰影字
有兩種CSS濾鏡能夠使文字產生陰影效果,分別是Drowshadow和Shadow,它們產生的效果略有所不同。
製作陰影字的操作步驟與製作光暈字的過程基本相同,只要在CSS樣式中重新選擇一種過濾器即可。
Drowshadow濾鏡的語法如下:DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 。
其中,Color表示投射陰影的顏色,用十六進制數來表示;OffX、OffY分別代表陰影偏離文字位置的量,單位為像素;Positive為一個邏輯值,1代表為所有不透明元素建立陰影,0代表為所有透明元素建立可見陰影。

(圖5 陰影字效果)
例如把過濾器設置為DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1),產生的效果如圖5。
遮罩字
CSS濾鏡中還為我們提供了遮罩的功能,可以把文字部分處理成遮罩,如果在背景中使用合適的圖片,就能產生漂亮的鏤空文字效果。
文檔窗口中插入一個1×1的表格,單擊文檔窗口左下角的標簽選中整個表格,在屬性檢查器(如圖6)的背景圖像中選擇一張合適的圖片,然後在單元格中輸入需要的文字。

(圖6 在表格中插入一幅背景圖片)
接下來我們為單元格添加Mask濾鏡,步驟與前兩例類似。在過濾器中選擇Mask(Color=?),這個參數決定遮罩的顏色,我們選擇用白色。
注意:本例中文字的顏色選擇並不重要,因為在最終效果中文字會被鏤空,顏色並不會顯示出來。

(圖7 遮罩字效果友)
設置完成後將這個CSS樣式應用到單元格,然後按下F12鍵就可以看到效果了(如圖7)。
注意:背景圖片是為整個表格添加的,對應<table>標簽,而CSS樣式是對單元格添加的,是<td>標簽,千萬不要搞錯。
動感字
製作動感字我們要用到Blur濾鏡,作用是產生模糊效果,它的語法格式為Blur(Add=?, Direction=?, Strength=?)。Add參數是一個布爾值,一般來說,當濾鏡用於圖片的時候取0,用於文字的時候取1;Direction代表模糊方向,單位是角度;Strength代表模糊移動值,單位為像素。比如我們定義Blur(Add=1, Direction=90, Strength=150),在預覽中就可以看到如圖8的效果。

(圖8 動感字效果友)
其實,CSS中很多濾鏡也能夠用於圖片的修飾,如Blur濾鏡就可以使圖片產生模糊效果。如果我們對這些濾鏡都能夠熟練應用,那麼有時在沒有專業圖像處理軟體的情況下,也能夠製作出相當不錯的圖片效果來。

7、flash製作中無法為文字添加濾鏡投影效果,怎麼辦

先把文字轉成影片剪輯才能添加濾鏡,文本是無法直接添加濾鏡的.

與網頁設計中文字濾鏡投影相關的知識