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

杨教授工作室精心创作的优秀程序员职业提升必读系列资料杨教授工作室，版权所有，盗版必究，1/20页1目录1.1CSS3中的透明度、RGBA颜色相关应用示例......................................................21.1.1CSS3中的透明度、RGBA颜色.......................................................................21.1.2CSS3渐变及应用示例........................................................................................51.2CSS3动画相关应用示例...........................................................................................71.2.1CSS3动画属性（Animation）及应用.............................................................71.2.2CSS3中的过渡属性（Transition）.................................................................111.2.3CSS32D/3D转换（变形）属性（Transform）............................................131.3图标字体...................................................................................................................191.3.1web界面设计的免费图标字体........................................................................19杨教授工作室精心创作的优秀程序员职业提升必读系列资料杨教授工作室，版权所有，盗版必究，2/20页21.1CSS3中的透明度、RGBA颜色相关应用示例1.1.1CSS3中的透明度、RGBA颜色1、透明度（1）CSS3透明…不透明…渐变（2）opacity属性声明用来设置一个元素的透明度层、文字、图片等…一个opacity的值为1的元素是完全不透明的，反之，值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。（3）示例div.opacityL1{background:#036;opacity:0.2;width:575px;height:20px;}div.opacityL2{background:#036;opacity:0.4;width:575px;height:20px;}div.opacityL3{background:#036;opacity:0.6;width:575px;height:20px;}div.opacityL4{background:#036;opacity:0.8;width:575px;height:20px;}div.opacityL5{background:#036;opacity:1.0;width:575px;height:20px;}（4）CSS3透明我们也可以在图片上使用不同透明度的透明效果，就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上，实现一种链接的鼠标经过效果。img.opacity1{opacity:0.25;width:150px;height:100px;}img.opacity2{opacity:0.50;width:150px;height:100px;}img.opacity3{opacity:0.75;width:150px;height:100px;}杨教授工作室精心创作的优秀程序员职业提升必读系列资料杨教授工作室，版权所有，盗版必究，3/20页32、CSS3的RGBA声明（1）RGBA声明的主要作用它不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。RGBA像RGB一样设置颜色，而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度（通道Alpha）。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。（2）CSS3RGBA色彩上面的效果有以下样式实现：div.rgbaL1{background:rgba(153,134,117,0.2);height:20px;}div.rgbaL2{background:rgba(153,134,117,0.4);height:20px;}div.rgbaL3{background:rgba(153,134,117,0.6);height:20px;}div.rgbaL4{background:rgba(153,134,117,0.8);height:20px;}div.rgbaL5{background:rgba(153,134,117,1.0);height:20px;}3、HSL和HSLA（1）使用CSS3HSL声明同样是用来设置颜色的HSL声明使用色调Hue（H）、饱和度Saturation（s）和亮度Lightness（L）来设置颜色。Hue衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。Saturation值是一个百分比：0%是灰度，100%饱和度最高Lightness值也是一个百分比：0%是最暗，50%均值，100%最亮。（2）HSLA和RGBA的效果是一样的杨教授工作室精心创作的优秀程序员职业提升必读系列资料杨教授工作室，版权所有，盗版必究，4/20页4RGBA和HSLA的类似，是在RGB的基础上多了个控制alpha透明度的参数，取值在0到1之间。（3）CSS3的HSL示例上面的演示由以下样式实现div.hslL1{background:hsl(320,100%,50%);height:20px;}div.hslL2{background:hsl(320,50%,50%);height:20px;}div.hslL3{background:hsl(320,100%,75%);height:20px;}div.hslL4{background:hsl(202,100%,50%);height:20px;}div.hslL5{background:hsl(202,50%,50%);height:20px;}div.hslL6{background:hsl(202,100%,75%);height:20px;}（4）CSS3HSLAHSLA就是在HSL的基础上多了个控制alpha透明度的参数，取值在0到1之间。上面的效果由以下样式实现：div.hslaL1{background:hsla(165,35%,50%,0.2);height:20px;}div.hslaL2{background:hsla(165,35%,50%,0.4);height:20px;}div.hslaL3{background:hsla(165,35%,50%,0.6);height:20px;}div.hslaL4{background:hsla(165,35%,50%,0.8);height:20px;}div.hslaL5{background:hsla(165,35%,50%,1.0);height:20px;}也允许直接用opacity定义颜色透明度，示例如下：background-color:hsl(0,100%,50%);opacity0.2;background-color:hsl(240,100%,50%);opacity0.2;background-color:hsl(120,100%,50%);opacity0.2;杨教授工作室精心创作的优秀程序员职业提升必读系列资料杨教授工作室，版权所有，盗版必究，5/20页51.1.2CSS3渐变及应用示例1、渐变可以创建类似于彩虹的效果CSS3渐变主要分为linear-gradient（线性渐变）和radial-gradient（径向渐变）两种不同的形式。2、不同类型的浏览器对渐变的支持不同Firefox可以使用角度来设定渐变的方向，而webkit类型的浏览器（Saf4+,Chrome等）只能使用x和y轴的坐标。3、Firefox中的CSS3渐变代码（1）Firefox中的CSS3渐变代码的第1种写法background-image:-moz-linear-gradient(top,#8fa1ff,#3757fa);注意在Firefox中，渐变的类型如linear类型（为线性渐变，而radial为放射渐变）已经放到了属性前缀中了。因此，在参数中则不再需要了，故只需要三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成lefttop，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。还可以在它们之间插入更多的参数，表示多种颜色的渐变。（2）Firefox中的CSS3渐变代码的第2种写法background:-moz-linear-gradient(top,＃FFC3C8,＃FF9298);第一个参数设置渐变的起始位置，而第二个参数设置起始位置的颜色，第三个参数设置终止位置的颜色。4、webkit类型的浏览器的CSS3渐变代码（1）第1种写法background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0,#ff4f02),color-stop(1,#8f2c00));其中的-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点的X、Y坐标值。这对值可以用坐标形式表示，也可以用关键值表示，比如lefttop（左上角）和leftbottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。但color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个参数表示该点的颜色。杨教授工作室精心创作的优秀程序员职业提升必读系列资料杨教授工作室，版权所有，盗版必究，6/20页6（2）第二种写法这种写法比较简单，而且效果比较自然。background:-webkit-gradient(linear,00,0100%,from(＃2074af),to(＃2c91d2));其中的第一个参数：表示的是渐变的类型，而linear代表线性渐变；第二个参数：分别对应x，y方向渐变的起始位置；第三个参数：分别对应x，y方向渐变的终止位置；第四个参数：设置了起始位置的颜色；第五个参数：设置了终止位置的颜色。（3）颜色百分比上面的渐变是有起点到终点100%渐变的，那如果要红色只占8%的比例，蓝色占92%的比例该怎么办？background:-moz-linear-gradient(top,red,blue8%);background:-webkit-gradient(linear,00,08%,from(red),to(blue));则背景色会从0%到8%由红色到蓝色线性渐变，8%到100%为纯蓝色blue。5、线性渐变在Opera浏览器下的应用（1）语法-o-linear-gradient([point||angle,]?stop,stop[,stop]);其中