| |||||
|
三 黑色的播放器 <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)系客服
