| |||||
|
三 黑色的播放器 <EMBED style="FILTER: xray()" src=音樂(lè )連接地址 width=570 height=40 type=audio/mpeg loop="-1" autostart="true" volume="0"> 效果:
四 白色半透明 <TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0,gray(); WIDTH: 320px; HEIGHT: 83px"> 效果:
|
五 銀白色播放器
<EMBED style="FILTER: Gray" src=音樂(lè )鏈接地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="1" volume="0">
效果:
No2.學(xué)習篇
每次發(fā)音樂(lè )帖子,都覺(jué)得播放器太單調,今天路過(guò)鳴言那里,看到他酷酷的黑色播放器,感到非常喜歡,于是就偷了一段代碼回來(lái)研究,原來(lái)就是在播放器上添加表格應用了CSS濾鏡。所以看到上面酷酷的播放器不用羨慕,實(shí)際上它們都是使用CSS濾鏡打造出來(lái)的。感興趣的就和我一起來(lái)學(xué)習吧!GO GO GO
濾鏡介紹:

下面挑幾個(gè)詳細介紹一下
(1)alpha屬性
alpha是來(lái)設置透明度的。先來(lái)看一下它的表達格式:
filter:alpha(opacity=opcity,finishopacity=finishopacity,
style=style,startX=startX,startY=startY,finishX=finishX,
finishY=finishY)
Opacity代表透明度等級,可選值從0到100,0代表完全透明,100代表完全不透明。 Style參數指定了透明區域的形狀特征。其中0代表統一形狀;1代表線(xiàn)形;2代表放射狀;3代表長(cháng)方形。
Finishopacity是一個(gè)可選項,用來(lái)設置結束時(shí)的透明度,從而達到一種漸變效果,它的值也是從0到100。 StartX和StartY代表漸變透明效果的開(kāi)始坐標,finishX和finishY代表漸變透明效果的結束坐標。
(2) blur屬性
filter:blur(add=add,direction,strength=strength)
我們看到blur屬性有三個(gè)參數:add、direction、strength。
Add參數有兩個(gè)參數值:true和false。意思是指定圖片是否被改變成模糊效果。 Direction參數用來(lái)設置模糊的方向。模糊效果是按照順時(shí)針?lè )较蜻M(jìn)行的。其中0度代表垂直向上,每45度一個(gè)單位,默認值是向左的270度。角度方向的對應關(guān)系見(jiàn)下表:

Strength參數值只能使用整數來(lái)指定,它代表有多少像素的寬度將受到模糊影響。默認值是5像素。
(3)Gray屬性
把一張圖片變成灰度圖。它的表達式很簡(jiǎn)單:
Filter:Gray
(4)Invert屬性
Invert屬性可以把對象的可視化屬性全部翻轉,包括色彩、飽和度和亮度值。
它的表達式也很簡(jiǎn)單:
Filter:Invert
(5)Xray屬性
就是X射線(xiàn)的意思。
Xray屬性,顧名思義,這種屬性產(chǎn)生的效果就是使對象看上去有一種X光片的感覺(jué)。 它的表達式很簡(jiǎn)單:
Filter:Xray 大家注意看黑色播放器的代碼,實(shí)際上就是用的這種屬性。
以上濾鏡代碼可以單獨使用,也可以聯(lián)合使用,而且還要活學(xué)活用。特效代碼中的一和二就是聯(lián)合使用的結果,當然其中還加了很多CSS樣式,如果感興趣可以進(jìn)一步深入學(xué)習。
聯(lián)系客服