?? ◤css教程_濾鏡_wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0040)http://www.rr365.net/edu-css/css106l.htm -->
<HTML><HEAD><TITLE>◤CSS教程.濾鏡.Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃</TITLE>
<META http-equiv=Content-Language content=zh-cn>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="CSS教程,CSS技巧 " name=keywords>
<META
content=網(wǎng)頁制作教程:asp教程,ASP.net教程,XML教程,PHP教程,FrontpageXP教程,DreamWeaverMX教程,JSP教程,JavaScript教程,VBScript教程,CSS教程,FrontpageXP,DreamWeaverMX,JSP,JavaScript,VBScript,CSS,asp,ASP.net,XML,PHP相關(guān)技巧及資源
name=description><LINK href="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/style.css"
type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2604" name=GENERATOR></HEAD>
<BODY language=Javascript1.2
onmouseover="window.status='歡迎光臨【龍人網(wǎng)站】www.rr365.net,專業(yè)服務(wù)全為您!!!';return true"
onclick=dynOutline() ;>
<TABLE id=table1 width="100%">
<TBODY>
<TR>
<TD background="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/logo4.gif" colSpan=8
height=30> </TD></TR>
<TR>
<TD width=195 height=53><A href="http://www.rr365.net/index.htm"><IMG
height=53 alt=網(wǎng)站優(yōu)化,網(wǎng)站排名
src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/logo-up.gif" width=195
border=0></A></TD>
<TD colSpan=7>
<H1 align=center>網(wǎng)頁制作教程:CSS教程</H1></TD></TR>
<TR>
<TD background="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/logo-bt.gif"
height=31>
<P align=center><A
href="http://www.rr365.net/edu-webdesign/index.htm"><FONT
color=#000000>網(wǎng)頁制作教程</FONT></A></P></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/index.htm">首 頁</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/web-promotion.htm">網(wǎng)站推廣</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webrestruction.htm">網(wǎng)站優(yōu)化</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/agent/emarketing.htm">輕松代理</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webhosting.htm">虛擬主機(jī)</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/vpp/domain.htm">域名注冊</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webdesign.htm">網(wǎng)站建設(shè)</A></B></TD></TR></TBODY></TABLE>
<TABLE id=table2 width="100%">
<TBODY>
<TR>
<TD bgColor=#00ccff colSpan=2 height=10> </TD></TR>
<TR>
<TD vAlign=top width="23%" bgColor=#e5ecf9 rowSpan=5>
<P><IMG height=25 src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/logo6.gif"
width=25 border=0> <B><A href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#ff0000>CSS教程</FONT></A></B></P>
<UL style="FONT-SIZE: 10pt; LINE-HEIGHT: 13pt">
<LI><A href="http://www.rr365.net/edu-css/css.htm">認(rèn)識CSS</A>
<LI><A href="http://www.rr365.net/edu-css/css102.htm">語法</A>
<LI><A href="http://www.rr365.net/edu-css/css103.htm">偽類—動態(tài)鏈接</A>
<LI><A href="http://www.rr365.net/edu-css/css104.htm">CSS屬性</A>
<LI><A href="http://www.rr365.net/edu-css/css105.htm">CSS定位</A>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css106.htm">濾鏡</A> </P>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css107.htm">CSS結(jié)合JS的運(yùn)用</A> </P>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css108.htm">如何在網(wǎng)頁中插入CSS</A>
</P></LI></UL>
<P><IMG height=25 src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/logo411.gif"
width=25 border=0> <FONT color=#000000><B><A
href="http://www.rr365.net/edu-css/css2.htm"><FONT
color=#008080>CSS技巧</FONT></A></B></FONT></P>
<P><IMG height=25 src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/logo411.gif"
width=25 border=0> <FONT color=#008080><B>CSS相關(guān)網(wǎng)站</B></FONT></P>
<UL style="FONT-SIZE: 10pt; LINE-HEIGHT: 13pt">
<LI><A href="http://www.w3.org/Style/CSS/" target=_blank>W3C之CSS規(guī)范</A>
<LI><A href="http://www.w3schools.com/css/default.asp" target=_blank>CSS
Tutorial</A> </LI></UL>
<P><IMG height=25 src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/logo411.gif"
width=25 border=0> <B><FONT color=#000000><A
href="http://www.rr365.net/edu-css/css4.htm"><FONT
color=#008080>CSS相關(guān)軟件</FONT></A></FONT></B></P>
<P> </P> </TD>
<TD width="77%">
<UL type=square>
<LI>
<P align=center><U><B><FONT size=4>CSS教程.濾鏡</FONT></B></U></P>
<P align=left> </P>
<DIV align=center>
<TABLE id=table4 cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=p2 vAlign=top>
<P class=p2 style="LINE-HEIGHT: 17pt"><B><FONT color=#336633><SPAN
style="FONT-SIZE: 11pt">12、Wave屬性</SPAN></FONT></B><SPAN
style="FONT-SIZE: 11pt"> </SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> Wave屬性用來把對象按照垂直的波紋樣式打亂。它的表達(dá)式如下:
</SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> </SPAN><FONT color=#006666><SPAN
style="FONT-SIZE: 11pt">Filter:Wave(Add=True(False),F(xiàn)req=頻率,LightStrength=增強(qiáng)光效,<BR> Phase=偏移量,Strength=強(qiáng)度)
</SPAN></FONT></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 我們看到Wave屬性的表達(dá)式還是比較復(fù)雜的,它一共有五個參數(shù)。Add參數(shù)有兩個參數(shù)值:True代表把對象按照波紋樣式打亂;False代表不打亂;<BR> Freq參數(shù)指生成波紋的頻率,也就是指定在對象上共需要產(chǎn)生多少個完整的波紋。
LightStrength參數(shù)是為了使生成的波紋增強(qiáng)光的效果。參數(shù)值可以從0到100。
Phase參數(shù)用來設(shè)置正弦波開始的偏移量。這個值的通用值為0,它的可變范圍為從0到100。這個值代表<A
href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#000000>開</FONT></A>始時的偏移量占波長的百分比。比如該值為25,代表正弦波從90度(360*25%)的方向開始。
<BR> 說了一大堆,我們還是先看一個實(shí)例吧。比如下面這幅圖片:</SPAN></P>
<P align=center><SPAN style="FONT-SIZE: 11pt"><IMG height=91
alt=原圖 src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/css0521.gif"
width=93 border=0 orig_onmouseout="null"
orig_onmouseover="null"></SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 下面我們對上面這個頁面加上Wave效果,代碼如下:</SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> <FONT
color=#006666><html><BR> <head> <BR> <title>
wave css</title> <BR> <style></FONT><FONT
color=#cc33cc>//*定義CSS 樣式開始*//</FONT> <BR> <FONT
color=#006666><!-- <BR>
.leaf{position:absolute;top:10;width:300;<BR>
filter:wave(add=true,freq=3,lightstrength=100,<BR>
phase=45,strength=20);}</FONT> <BR> <FONT
color=#cc33cc>//*設(shè)置leaf類的樣式,絕對定位,wave屬性,產(chǎn)生3個波紋,
光強(qiáng)為100,波紋<BR> 從162度(360*45%)開始,振幅為20*// </FONT><BR> <FONT
color=#006666>img{position:absolute;top:110;left:40;<BR> filter:wave(add=true,freq=3,lightstrength=100,<BR>
phase=25,strength=5);}</FONT> <BR> <FONT
color=#cc33cc>//*設(shè)置IMG的樣式,絕對定位,wave屬性,產(chǎn)生3個波紋,光強(qiáng)為100,波紋從<BR>
90度開始,振幅為5*//</FONT> <BR> <FONT color=#006666>-->
<BR> </style> <BR> </head> <BR> <body>
<BR> <div class=“wave”></FONT><FONT
color=#cc33cc>//*定義DIV區(qū)域內(nèi)為Wave類*//</FONT> <BR> <FONT
color=#006666><p style=“font-family:lucida handwriting;
<BR> font-size=72pt;
font-weight:bold;<BR> color:rgb(189,1,64);”>Leaf</p></FONT>
<BR> <FONT color=#cc33cc>//*設(shè)置字體名稱、大小、粗細(xì)、顏色*//</FONT>
<BR> <FONT color=#006666></div> <BR> <p><img
src=“ss01044.jpg”></p></FONT> <FONT
color=#cc33cc>//*導(dǎo)入圖片*//</FONT> <BR> </SPAN><FONT
color=#006666><SPAN style="FONT-SIZE: 11pt"></body>
<BR> </html></SPAN></FONT></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 這段代碼實(shí)現(xiàn)的效果如下圖:</SPAN></P>
<P align=center><SPAN style="FONT-SIZE: 11pt"><IMG height=286
alt=wave效果圖1
src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/css051.gif" width=316
border=0 orig_onmouseout="null"
orig_onmouseover="null"></SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 如果把Wave的參數(shù)隨便做一下改動,就會達(dá)到多種效果,請看另外一種效果:(如下圖):</SPAN></P>
<P align=center><SPAN style="FONT-SIZE: 11pt"><IMG height=277
alt=wave效果圖2
src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/css050.gif" width=305
border=0 orig_onmouseout="null"
orig_onmouseover="null"></SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 其實(shí)這種效果只是增大了freq參數(shù)的值,減小了Strength、LightStrength的值就可以了。您也可以多試試,改變其他的參數(shù)值,還可以達(dá)到許多不同的效果來。
<BR> 本節(jié)主要講述了Wave屬性的應(yīng)用,下一節(jié)將向您介紹Xray屬性。
</SPAN></P></TD></TR></TBODY></TABLE></DIV>
<P align=left> </P></LI></UL></TD></TR>
<TR>
<TD>
<P
align=center>
<A href="http://www.rr365.net/edu-css/css106k.htm">上一節(jié)</A>|<A
href="http://www.rr365.net/edu-css/css106m.htm">下一節(jié)</A></P></TD></TR>
<TR>
<TD>
<HR width="75%" color=#e5ecf9>
<P align=center>網(wǎng)頁教程: <A
href="http://www.rr365.net/edu-asp/index.htm">ASP</A>| <A
href="http://www.rr365.net/edu-asp-net/asp-net.htm">ASP.net</A>| <A
href="http://www.rr365.net/edu-xml/xml.htm">XML</A>| <A
href="http://www.rr365.net/edu-php/php.htm">PHP4</A> | <A
href="http://www.rr365.net/edu-frontpage/frontpage.htm">FrontpageXP</A> |
<A
href="http://www.rr365.net/edu-dreamweaver/dreamweaver.htm">DreamWeaverMX</A></P>
<P
align=center>
<A href="http://www.rr365.net/edu-cplus/c.htm">C#</A>| <A
href="http://www.rr365.net/edu-jsp/jsp.htm">JSP</A> | <A
href="http://www.rr365.net/edu-javascript/javascript.htm">JavaScript</A> |
<A href="http://www.rr365.net/edu-vbscript/vbscript.htm">VBScript</A> | <A
href="http://www.rr365.net/edu-css/css.htm">CSS</A></P></TD></TR>
<TR>
<TD>
<HR width="50%" color=#e5ecf9>
<P> </P></TD></TR>
<TR>
<TD>
<FORM name=query0 action=http://www1.baidu.com/baidu method=get
target=_blank>
<DIV align=center><INPUT type=hidden value=baidu name=tn0> <A
href="http://www.baidu.com/"><IMG alt=Baidu
src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/baidu_logo.gif" align=bottom
border=0></A> <INPUT size=15 name=word0> <IFRAME border=0 name=I1
marginWidth=0 marginHeight=0
src="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/help1.htm" frameBorder=no
width=0 scrolling=no height=0></IFRAME><INPUT type=submit value=百度搜索>
</DIV></FORM> </TD></TR></TBODY></TABLE>
<TABLE id=table3 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: 1px solid" borderColor=#00ccff height=21> </TD></TR>
<TR>
<TD background="◤CSS教程_濾鏡_Wave屬性 --▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/tdbg.gif"
bgColor=#e5ecf9>
<P align=center><B><A
href="http://www.rr365.net/summary/aboutus.htm">關(guān)于我們</A>-<A
href="http://www.rr365.net/summary/paymethod.htm">付款方式</A>-<A
href="http://www.rr365.net/helpcenter/helpcenter.htm">幫助中心</A>-<A
href="http://www.rr365.net/agent/agent.htm">輕松代理</A>-<A
href="http://www.rr365.net/sitemap.htm">網(wǎng)站地圖</A>-<A
href="mailto:support@rr365.net">聯(lián)系我們</A></B></P></TD></TR></TBODY></TABLE></BODY></HTML>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -