学习播放器代码—

学习播放器代码——单曲篇

2008年12月12日17：59　来源：360doc　清勤居士

No1.单曲播放器特效代码篇

不想费事自己做就直接复制代码，改下大小和音乐链接地址奏噢可了。

一透明播放器代码：

效果：

二红色的播放器代码

效果：

三黑色的播放器

效果：

四白色半透明

效果：

五银白色播放器

效果：

No2.学习篇

每次发音乐帖子，都觉得播放器太单调，今天路过鸣言那里，看到他酷酷的黑色播放器，感到非常喜欢，于是就偷了一段代码回来研究，原来就是在播放器上添加表格应用了CSS滤镜。所以看到上面酷酷的播放器不用羡慕，实际上它们都是使用CSS滤镜打造出来的。感兴趣的就和我一起来学习吧！GO GO GO

滤镜介绍：

下面挑几个详细介绍一下

（1）alpha属性

　　alpha是来设置透明度的。先来看一下它的表达格式：

　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY）

Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
　　Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。

(2) blur属性

filter：blur（add=add，direction，strength=strength）

　　我们看到blur属性有三个参数：add、direction、strength。
　　Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。　　　Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：

　　Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。

(3)Gray属性

把一张图片变成灰度图。它的表达式很简单：

　 Filter：Gray

(4)Invert属性

　　Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。
　　它的表达式也很简单：

　　Filter：Invert

（5）Xray属性

就是X射线的意思。
　　Xray属性，顾名思义，这种属性产生的效果就是使对象看上去有一种X光片的感觉。它的表达式很简单：

　　Filter：Xray 大家注意看黑色播放器的代码，实际上就是用的这种属性。

以上滤镜代码可以单独使用，也可以联合使用,而且还要活学活用。特效代码中的一和二就是联合使用的结果，当然其中还加了很多CSS样式，如果感兴趣可以进一步深入学习。

点击进入更多精彩>>>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。