杨教授工作室精心创作的优秀程序员 职业提升必读系列资料目录1.1 CSS3中的透明度、RGBA颜色相关应用示例 21.1.1 CSS3中的透明度、RGBA颜色 21.1.2 CSS3渐变及应用示例 5.1.2 CSS3动画相关应用示例 7.1.2.1 CSS3 动画属性(Animation)及应用 71.2.2 CSS3 中的过渡属性(Transition) 111.2.3 CSS3 2D/3D 转换(变形)属性(Transform) 131.3 图标字体 .191.3.1 web界面设计的免费图标字体 19杨教授工作室，版权所有20盗版必究, 6/20 页1.1 CSS3中的透明度、RGB/颜色相关应用示例1.1.1 CSS3中的透明度、RGB/颜色1、透明度(3) CSS3透明…不透明…渐变(4) opacity属性声明用来设置一个元素的透明度层、文字、图片等…一个opacity的值为1的元素是完全不透明的，反之，值为 0是完全透明的，看不见的1到0之间的任何值都表示该元素的透明程度5) 示例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; }(6) CSS 3 透明我们也可以在图片上使用不同透明度的透明效果，就像上面的示例一样。
一个很酷的 应用是将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; }2、CSS3 的 RGBA 声明（1）RGBA声明的主要作用它不仅仅让我们像通常一样设置 RGB颜色，而且还可以设置其透明度RGBA像RGB 一样设置颜色，而这个” A ” 一一 RGBA中的最后一个值一一允许我们设置该元素的透明度（通道Alpha）就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而 一个opacity为0的元素是完全透明的2）CSS3 RGBA 色彩上面的效果有以下样式实现：div.rgbaLI { 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 { backgro un d:rgba(153, 134, 117, 1.0); 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）CSS3 的 HSL 示例上面的演示由以下样式实现div.hsILI { background:hsl(320, 100%, 50%); height:20px; }div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }div.hslL3 { backgro un d:hsl(320, 100%, 75%); height:20px; }div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }div.hslL5 { backgro un d:hsl(202, 50%, 50%); height:20px; }div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }(4)CSS3 HSLAHSLA就是在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%); opacity 0.2;background-color: hsl(240,100%, 50%); opacity 0.2;background-color: hsl(120,100%, 50%); opacity 0.2;1.1.2 CSS3渐变及应用示例1、 渐变可以创建类似于彩虹的效果CSS3渐变主要分为linear-gradient （线性渐变）和 radial-gradient （径向渐变）两种不 同的形式。
2、 不同类型的浏览器对渐变的支持不同Firefox可以使用角度来设定渐变的方向，而 webkit类型的浏览器（Saf4+, Chrome等） 只能使用x和y轴的坐标3、 Firefox中的CSS3渐变代码（1） Firefox中的CSS3渐变代码的第1种写法backgro un d-image: -moz-li near-gradie nt（top, #8fa1ff, #3757fa）;注意在Firefox中，渐变的类型如linear类型（为线性渐变，而radial为放射渐变）已 经放到了属性前缀中了因此，在参数中则不再需要了，故只需要三个参数第一个参数 表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左 上角到右下角第二个和第三个参数分别是起点颜色和终点颜色还可以在它们之间插入 更多的参数，表示多种颜色的渐变2） Firefox中的CSS3渐变代码的第2种写法background:-moz-linear-gradient（top, # FFC3C8,# FF9298）;第一个参数设置渐变的起始位置，而第二个参数设置起始位置的颜色，第三个参数设 置终止位置的颜色。
4、 webkit类型的浏览器的CSS3渐变代码（1）第1种写法backgro un d-image: -webkit-gradie nt（l in ear, left top, left bottom, color-stop（0, #ff4f02）, color-stop（1, #8f2c00））;其中的-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个第一个参数表 示渐变类型（type），可以是linear （线性渐变）或者radial （径向渐变）第二个参数和 第三个参数，都是一对值，分别表示渐变起点和终点的 X、丫坐标值这对值可以用坐标形式表示，也可以用关键值表示，比如 left top （左上角）和left bottom （左下角）第四个和第五个参数，分别是两个 color-stop函数但color-stop函数接受两个参数，第一个表示渐变的位置， 0为起点，0.5为中点，1为结束点：第二个参数表示该点的颜色4) 第二种写法这种写法比较简单，而且效果比较自然background:-webkit-gradient(linear, 0 0, 0 100%, from住 2074af), to(# 2c91d2));其中的第一个参数：表示的是渐变的类型，而linear代表线性渐变；第二个参数：分别 对应x, y方向渐变的起始位置；第三个参数：分别对应 x, y方向渐变的终止位置；第四 个参数：设置了起始位置的颜色；第五个参数：设置了终止位置的颜色。
5) 颜色百分比上面的渐变是有起点到终点100%渐变的，那如果要红色只占8%的比例，蓝色占92%的比例该怎么办？ backgro und: -moz-li near-gradie nt(top , red, blue 8%);background: -webkit-gradient(linear, 0 0, 0 8%, from(red), to(blue));则背景色会从0%到8%由红色到蓝色线性渐变，8%到100%为纯蓝色blue5、线性渐变在Opera浏览器下的应用(1) 语法-o-li near-gradie nt([vpo int> || ,]? , [, ]);其中的-o-linear-gradient有三个参数第一个参数表示线性渐变的方向 top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角第二个和第三个参数分别是起点颜色和终点颜色还可以在它们之间插入更多的参数， 表示多种颜色的渐变2) 示例代码backgro und: -o-l in ear-gradie nt(top,#ccc, #000);6 IE浏览器中实现渐变在IE浏览器中实现渐变，只能使用IE自己的滤镜技术实现。
下面为语法格式：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= # 00ffff,endColorstr=# 9fffff,gran die ntType=1);其中的第一个参数代表渐变起始位置的颜色，而第二个参数代表渐变终止位置的颜色， 第三个参数代表渐变的类型一一0代表竖向渐变，1代表横向渐变杨教授工作室精心创作的优秀程序员 职业提升必读系列资料1.2 CSS3动画相关应用示例1.2.1 CSS3动画属性（Animation ）及应用1、 CSS3中的动画通过CSS3,我们能够创建动画，这可以在许多网页中取代动画图片、 Flash动画以及JavaScript但CSS3中的动画是使元素从一种CSS样式逐渐变化为另一种CSS样式的效果但如果再结合使用JavaScript脚本语言将可以实现更加强大的动画效果以及交互动作2、 主要的属性及功能描述（1） @keyframes 规定动画（2） animation所有动画属性的简写属性，除了 animation-play-state属性（3） animation-name 规定 @keyframes 动画的名称（4） animation-duration规定动画完成一个周期所花费的秒或毫秒（5） animation-timing-function 规定动画的速度曲线（6） animation-delay规定动画何时开始（7） animation-iteration-count规定动画被播放的次数动画的循环次数，其值可以是一个正整数，表示循环次数，也可以设置为 infinite，即无限循环，默认为1。
8） animation-direction规定动画是否在下一周期逆向地播放动画在循环中是否反向运动，取值为 n ormal代表正向方向；而取值为alternate，代表 与反向交替运动，具体为第偶数次正向运动，第奇数次向反方向运动，默认为 n ormal9） animation-play-state规定动画是否正在运行或暂停（10） animation-fill-mode规定对象动画时间之外的状态3、 应用@keyframes规定动画（1） 创建动画的原理是将一套CSS样式逐渐变化为另一套样式并在动画过程中，设计人员能够多次改变 这套CSS样式以百分比来规定改变发生的时间， 或者通过关键词"from"和"to"（等价 于0%和100%）――其中0%代表动画的开始时间，而100%代表动画的结束时间2） 不同浏览器的兼容定义Firefox 支持替代的 @-moz-keyframes 规则，而 Opera 支持替代的 @-o-keyframes 规 则，Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则3） @keyframes 的语法@keyframes animationname {keyframes-selector {css-styles;}}其中的animationname定义动画的名称，为必需的值；而keyframes-selector也是必需的， 代表动画时长的百分比一一合法的值：0-100%、from （与0%相同）、to（与100%相同）； css-styles参数也是必需的，代表一个或多个合法的 CSS样式属性。
下面的示例实现在一个动画中改变多个 CSS样式：@keyframes mymove{0% {top:0px; backgrou nd:red; width:100px;}100% {top:200px; backgrou nd:yellow; width:300px;}}@-moz-keyframes mymove { /* Firefox */0% {top:0px; backgrou nd:red; width:100px;}100% {top:200px; backgrou nd:yellow; width:300px;}}@-webkit-keyframes mymove { /* Safari 和 Chrome */0% {top:0px; backgrou nd:red; width:100px;}100% {top:200px; backgrou nd:yellow; width:300px;}}@-o-keyframes mymove { /* Opera */0% {top:0px; backgrou nd:red; width:100px;}100% {top:200px; backgrou nd:yellow; width:300px;}}4、将所创建出的动画绑到某个元素中下面的示例实现将前面创建出的名称为“ mymove”的动画绑定到某个＜div＞元素中。
div{ani mati on: mymove 5s;-moz-a ni matio n: mymove 5s; /* Firefox */-webkit-animation: mymove 5s; /* Safari 和 Chrome */-o-a ni mati on: mymove 5s; /* Opera */}在绑定时，必须要定义动画的名称和时长因为如果忽略时长，则动画不会允许，默 认值是005、应用示例(1) HTML 代码v!D0CTYPE html>
v/body>(2) 执行的结果6 animation-timing-function定义动画的过渡类型linear线性过渡。
相当于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)bease平滑过渡相当于贝塞尔曲线(0.25, 0.1,0.25, 1.0ease-in由慢到快相当于贝塞尔曲线(0.42, 0, 1.0, 1.0占ease-out由快到慢相当于贝塞尔曲线(0, 0, 0.58, 1.0)7) ease-in-out由慢到快再到慢相当于贝塞尔曲线（0.42, 0, 0.58, 1.08) cubic-bezier(number, number, number, number)特定的贝塞尔曲线类型，number在［0, 1］区间内取值7、animation 和 transition 的差别很多的资料会把transition也直接归类为动画，从很多实际使用的例子中看，transition 都表现出动画的特征，但实际上，它们仍有很大的区别：（1） transition需要经过用户触发才会表现出动态的效果这些触发条件可以是:link、：visited、：hover、:active和:focus五个CSS伪类，也可以 是click、focus等JavaScirpt事件，如果没有设置触发条件而直接给元素设置 transition， 用户只能看到元素的终态而没有动画过程。
2） animation则无须触发条件，开发者只需为元素绑定动画即可1.2.2 CSS3中 的过渡属性（Tran sition ）1、 CSS3中的过渡效果可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样 式时为元素添加效果要实现这一点，必须规定两项内容：（1） 规定希望把效果添加到哪个 CSS属性上，过渡效果开始于指定的 CSS属性值发生改变时（2） 规定效果的时长2、 主要的属性及功能描述（1） transition简写属性，用于在一个属性中设置四个过渡属性2） transition-property规定应用过渡的CSS属性的名称3） transition-duration定义过渡效果花费的时间4） transition-timing-function规定过渡效果的时间曲线5） transition-delay规定过渡效果何时开始3、应用示例（1）HTML 代码v!DOCTYPE html>
vp>请把鼠标指针放到黄色的 div元素上，来查看过渡效果。
（2）执行的结果当将鼠标指向
标签时，其宽度将要发生变化（从 100px变化为300px），在变化 的过程中应用过渡效果——宽度逐渐变化而当指针移出元素时，它会逐渐变回原来的样式（宽度为100px）1.2.3 CSS3 2D/3D 转换（变形）属性（Transform）1、2D/3D转换属性通过CSS3转换，我们能够对元素（文字或图像）进行移动、缩放、转动、倾斜、拉 长或拉伸一一因为转换是使元素改变形状、尺寸和位置的一种效果2、主要的属性及功能描述（1） transform向元素应用2D或3D转换2） transform-origin允许你改变被转换元素的位置3） transform-style规定被嵌套元素如何在 3D空间中显示（4） perspective规定3D元素的透视效果5） perspective-origin规定3D元素的底部位置6） backface-visibility定义元素在不面对屏幕时是否可见3、主要的2D转换方法（1） translate（）元素（文字或图像）从其当前位置平移到给定的 left （x坐标） 和top（ y坐标）位置参数所在的位置。
如translate（50px,100px）实现将元素从水平方向上移动 50个像素，垂 直方向上移动100个像素translate方法中的两个参数也可以修改成只使用一个参数，跟 skew方法类似，省略另一个参数，这种情况视为只在水平方向移动，垂直方向上不移动2） rotate（）元素顺时针旋转给定的角度，而如果给定负值，则元素将逆时针旋转如 rotate（30deg） 实现把元素顺时针旋转 30度3) scale()根据给定的宽度(X轴)和高度(丫轴)参数实现将元素的尺寸增加或减少如scale(2,4) 实现将把宽度转换为原始尺寸的 2倍，把高度转换为原始高度的 4倍scale()方法中的参数指定缩放倍率，参数可以是整数，也可以是小数例如：“scale(0.5)” 表示缩小50%4) skew()根据给定的水平线(X轴)和垂直线(丫轴)参数实现元素翻转给定的角度(文字或 图像的倾斜效果)如 skew(30deg,20deg)实现围绕X轴把元素翻转30度，围绕丫轴 翻转20度其中的“ deg”是CSS3的“ Values and Un its’模块中定义的一个角度单位其中的参数分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
例如 “skew(30deg, 30deg”表示水平方向上倾斜 30度，垂直方向上也倾斜 30度5) matrix()matrix()方法实现把所有2D转换方法组合在一起，它需要六个参数并实现旋转、缩 放、移动以及倾斜元素4、2D转换的应用示例HTML 代码
黄色 div
6 3D转换方法rotateX()通过rotateX()方法，将元素实现围绕其 X轴以给定的度数进行旋转。
rotateY()通过rotateY()方法，将元素围绕其 丫轴以给定的度数进行旋转7、3D转换应用示例(1)HTML 代码
你好这是一个 div元素
你好这是一个 div 元素v/div>(2)执行的结果8、使用transform-origin属性指定变形的基准点(1)默认的变形基准点使用transform方法进行文字或图像变形的时候， 默认是以元素的中心点为基准点进行的。
但可以使用transform-origin属性，改变变形的基准点2）语法格式tran sform-orig in: x-axis y-axis z-axis;指定transform-origin属性值的时候，采用“基准点在元素水平方向上的位置，基准点 在元素垂直方向上的位置”的方法，其中“基准点在元素水平方向上的位置”中可以指定的值为left、center、right，“基准点在垂直方向上的位置”中可以指定的值为 top、center、 bottom o（3）应用示例下面使用transform-origin属性把变形的基准点修改为第二个元素的左下角
Transform 指定基准点变形