资源描述：
《通过代码示例跟我学应用css实现透明度rgba颜色和动画相关的应用示例精选》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
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界面设计的免费图标字体1920杨教授工作室，版权所有，盗版必究，20/20页杨教授工作室精心创作的优秀程序员职业提升必读系列资料1.1CSS3中的透明
2、度、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;}
3、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.opacit
4、y1{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;}20杨教授工作室，版权所有，盗版必究，20/20页杨教授工作室精心创作的优秀程序员职业提升必读系列资料2、CSS3的RGBA声明（1）RGBA声明的主要作用它不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。RGBA像RGB一样设置颜色，而这个”A”——RGBA中的最后一个值——允
5、许我们设置该元素的透明度（通道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{back
6、ground: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）来设置颜色。lHue衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。lSaturation值是一个百分比：0%是灰度，100%饱和度最高lLightness值也是一个百分比：0%是最暗，50%均值，100%最亮
7、。（2）HSLA和RGBA的效果是一样的20杨教授工作室，版权所有，盗版必究，20/20页杨教授工作室精心创作的优秀程序员职业提升必读系列资料RGBA和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:2
