通过代码示例的跟我学应用CSS实现透明度RGBA颜色和动画相关的应用示例样稿.doc

目 录
CSS3中透明度、RGBA颜色相关应用示例 2
CSS3中透明度、RGBA颜色 2
CSS3渐变及应用示例 5
CSS3动画相关应用示例 7
CSS3 动画属性（Animation）及应用 7
CSS3中过渡属性（Transition） 11
CSS3 2D/3D 转换（变形）属性（Transform） 13
图标字体 19
web界面设计无偿图标字体 19
CSS3中透明度、RGBA颜色相关应用示例
CSS3中透明度、RGBA颜色
1、透明度
（1）CSS3透明…不透明…渐变
（2）opacity属性申明用来设置一个元素透明度
层、文字、图片等…一个opacity值为1元素是完全不透明，反之，值为0是完全透明，看不见。1到0之间任何值全部表示该元素透明程度。
（3）示例
{ background:#036; opacity:; width:575px; height:20px; }
{ background:#036; opacity:; width:575px; height:20px; }
{ background:#036; opacity:; width:575px; height:20px; }
{ background:#036; opacity:; width:575px; height:20px; }
{ background:#036; opacity:; width:575px; height:20px; }
（4）CSS 3 透明
我们也能够在图片上使用不一样透明度透明效果，就像上面示例一样。一个很酷应用是将opacity应用到:hover上，实现一个链接鼠标经过效果。
{ opacity:; width:150px; height:100px; }
{ opacity:; width:150px; height:100px; }
{ opacity:; width:150px; height:100px; }
2、CSS3RGBA申明
（1）RGBA申明关键作用
它不仅仅让我们像通常一样设置RGB颜色，而且还能够设置其透明度。RGBA像RGB一样设置颜色，而这个”A”——RGBA中最终一个值——许可我们设置该元素透明度（通道Alpha）。就像opacity申明一样，一个opacity值为1元素是完全不透明，而一个opacity为0元素是完全透明。
（2）CSS3 RGBA 色彩
上面效果有以下样式实现：
{ background:rgba(153, 134, 117, ); height:20px; }
{ background:rgba(153, 134, 117, ); height:20px; }
{ background:rgba(153, 134, 117, ); height:20px; }
{ background:rgba(153, 134, 117, ); height:20px; }
{ background:rgba(153, 134, 117, ); height:20px; }
3、HSL和HSLA
（1）使用CSS3 HSL申明一样是用来设置颜色
HSL申明使用色调Hue（H）、饱和度Saturation（s）和亮度Lightness（L）来设置颜色。
Hue衍生于色盘：0和360是红色，靠近120是绿色，240是蓝色。
Saturation值是一个百分比：0%是灰度，100%饱和度最高
Lightness值也是一个百分比：0%是最暗，50%均值，100%最亮。
（2）HSLA和RGBA效果是一样
RGBA和HSLA类似，是在RGB基础上多了个控制alpha透明度参数，取值在0到1之间。
（3）CSS3HSL示例
上面演示由以下样式实现
{ background:hsl(320, 100%, 50%); height:20px; }
{ background:hsl(320, 50%,