1、div.opacityL5 background:1.0;（4）CSS 3 透明我们也可以在图片上使用不同透明度的透明效果，就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上，实现一种链接的鼠标经过效果。img.opacity1 opacity:0.25;150px;100px;img.opacity2 opacity:0.50;img.opacity3 opacity:0.75;2、CSS3的RGBA声明（1）RGBA声明的主要作用它不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。RGBA像RGB一样设置颜色，而这个”A”RGBA中的最后一个值允许我们设置
2、该元素的透明度（通道Alpha）。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。（2）CSS3 RGBA 色彩上面的效果有以下样式实现：div.rgbaL1 background:rgba（153, 134, 117, 0.2）;div.rgbaL2 background:rgba（153, 134, 117, 0.4）;div.rgbaL3 background:rgba（153, 134, 117, 0.6）;div.rgbaL4 background:rgba（153, 134, 117, 0.8）;div.rgba
3、L5 background:rgba（153, 134, 117, 1.0）;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之
4、间。（3）CSS3的HSL示例上面的演示由以下样式实现div.hslL1 background:hsl（320, 100%, 50%）;div.hslL2 background:hsl（320, 50%, 50%）;div.hslL3 background:hsl（320, 100%, 75%）;div.hslL4 background:hsl（202, 100%, 50%）;div.hslL5 background:hsl（202, 50%, 50%）;div.hslL6 background:hsl（202, 100%, 75%）;（4）CSS3 HSLA HSLA就是在HSL的基础上多了
5、个控制alpha透明度的参数，取值在0到1之间。上面的效果由以下样式实现：div.hslaL1 background:hsla（165, 35%, 50%, 0.2）;div.hslaL2 background:hsla（165, 35%, 50%, 0.4）;div.hslaL3 background:hsla（165, 35%, 50%, 0.6）;div.hslaL4 background:hsla（165, 35%, 50%, 0.8）;div.hslaL5 background:hsla（165, 35%, 50%, 1.0）; 也允许直接用opacity定义颜色透明度，示例如下：b
6、ackground-color: hsl（0,100%, 50%）; opacity 0.2; hsl（240,100%, 50%）; hsl（120,100%, 50%）;1.1.2 CSS3渐变及应用示例1、渐变可以创建类似于彩虹的效果CSS3 渐变主要分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）两种不同的形式。2、不同类型的浏览器对渐变的支持不同 Firefox可以使用角度来设定渐变的方向，而webkit类型的浏览器（Saf4+, Chrome等）只能使用x和y轴的坐标。3、 Firefox中的CSS3渐变代码（1）Firefox中的CS
7、S3渐变代码的第1种写法background-image: -moz-linear-gradient（top, #8fa1ff, #3757fa）;注意在Firefox中，渐变的类型如linear类型（为线性渐变，而radial为放射渐变）已经放到了属性前缀中了。因此，在参数中则不再需要了，故只需要三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。还可以在它们之间插入更多的参数，表示多种颜色的渐变。（2）Firefox中的CSS3渐变代码的第2种写法background:
8、-moz-linear-gradient（top, FFC3C8,FF9298）;第一个参数设置渐变的起始位置，而第二个参数设置起始位置的颜色，第三个参数设置终止位置的颜色。4、 webkit类型的浏览器的CSS3渐变代码（1）第1种写法 -webkit-gradient（linear, left top, left bottom, color-stop（0, #ff4f02）, color-stop（1, #8f2c00）;其中的-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（
9、径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点的X、Y坐标值。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。但color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个参数表示该点的颜色。（2）第二种写法这种写法比较简单，而且效果比较自然。-webkit-gradient（linear, 0 0, 0 100%, from（2074af）, to（2c91d2）;其中的第一个参数：表示的是渐变的类型，而l
10、inear代表线性渐变；第二个参数：分别对应x，y方向渐变的起始位置；第三个参数：分别对应x，y方向渐变的终止位置；第四个参数：设置了起始位置的颜色；第五个参数：设置了终止位置的颜色。（3）颜色百分比上面的渐变是有起点到终点100%渐变的，那如果要红色只占8%的比例，蓝色占92%的比例该怎么办？ background: -moz-linear-gradient（top , red, blue 8%）; -webkit-gradient（linear, 0 0, 0 8%, from（red）, to（blue）;则背景色会从0%到8%由红色到蓝色线性渐变，8%到100%为纯蓝色blue。5、线
11、性渐变在 Opera浏览器下的应用（1）语法-o-linear-gradient（ | ,? , , ）;其中的-o-linear-gradient 有三个参数。第一个参数表示线性渐变的方向top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。（2）示例代码 -o-linear-gradient（top,#ccc, #000）;6、IE 浏览器中实现渐变在IE浏览器中实现渐变，只能使用IE自己的滤镜技术实现。下面为语法格式：filter:progid:DXImageTransform.Microsoft.gradient（startColorstr=0
12、0ffff,endColorstr=9fffff,grandientType=1）;其中的第一个参数代表渐变起始位置的颜色，而第二个参数代表渐变终止位置的颜色，第三个参数代表渐变的类型0代表竖向渐变，1代表横向渐变。1.2 CSS3动画相关应用示例1.2.1 CSS3 动画属性（Animation）及应用1、CSS3中的动画 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。但CSS3中的动画是使元素从一种CSS样式逐渐变化为另一种CSS样式的效果。但如果再结合使用JavaScript脚本语言将可以实现更加强大的动画效果以及交互动作。
13、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 规定动画被播放的次数 动画的循环次数，其值可以是一个正整数，表示循环次数，也可以设置为 infinit
14、e ，即无限循环，默认为 1。（8）animation-direction规定动画是否在下一周期逆向地播放 动画在循环中是否反向运动，取值为normal代表正向方向；而取值为alternate ，代表与反向交替运动，具体为第偶数次正向运动，第奇数次向反方向运动，默认为 normal。（9）animation-play-state规定动画是否正在运行或暂停（10）animation-fill-mode规定对象动画时间之外的状态3、应用keyframes规定动画（1）创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。并在动画过程中，设计人员能够多次改变这套 CSS 样式。以百分比来规定改变
15、发生的时间，或者通过关键词 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-selec
16、tor也是必需的，代表动画时长的百分比合法的值：0-100%、from（与 0% 相同）、to（与 100% 相同）；css-styles参数也是必需的，代表一个或多个合法的 CSS 样式属性。下面的示例实现在一个动画中改变多个 CSS 样式：keyframes mymove0% top:0px;red;100% top:200px;yellow;300px;-moz-keyframes mymove /* Firefox */-webkit-keyframes mymove /* Safari 和 Chrome */-o-keyframes mymove /* Opera */4、将所创建出
17、的动画绑到某个元素中 下面的示例实现将前面创建出的名称为“mymove”的动画绑定到某个元素中。divanimation: mymove 5s;-moz-animation: /* Firefox */-webkit-animation: /* Safari 和 Chrome */-o-animation: /* Opera */在绑定时，必须要定义动画的名称和时长。因为如果忽略时长，则动画不会允许，默认值是 0。5、应用示例（1）HTML代码htmlheadstylewidth:height:position:relative;mymove 5s infinite; /* Firefox *
18、/ /* Safari and Chrome */-moz-keyframes mymove /* Firefox */-webkit-keyframes mymove /* Safari and Chrome */-o-keyframes mymove /* Opera */style/headbody/div/body/html（2）执行的结果6、animation-timing-function 定义动画的过渡类型（1）linear线性过渡。相当于贝塞尔曲线（0.0, 0.0, 1.0, 1.0）。（2）ease平滑过渡。相当于贝塞尔曲线（0.25, 0.1, 0.25, 1.0）。（3
19、）ease-in由慢到快。相当于贝塞尔曲线（0.42, 0, 1.0, 1.0）。（4）ease-out由快到慢。相当于贝塞尔曲线（0, 0, 0.58, 1.0）。（5）ease-in-out由慢到快再到慢。相当于贝塞尔曲线（0.42, 0, 0.58, 1.0）。（6）cubic-bezier（number, number, number, number）特定的贝塞尔曲线类型，number 在 0, 1 区间内取值。7、animation和transition的差别很多的资料会把 transition 也直接归类为动画，从很多实际使用的例子中看，transition 都表现出动画的特征，但
20、实际上，它们仍有很大的区别：（1）transition 需要经过用户触发才会表现出动态的效果这些触发条件可以是:link、:visited、:hover、:active 和 :focus 五个 CSS 伪类，也可以是 click、focus 等 JavaScirpt 事件，如果没有设置触发条件而直接给元素设置transition ，用户只能看到元素的终态而没有动画过程。（2）animation 则无须触发条件，开发者只需为元素绑定动画即可。1.2.2 CSS3中的过渡属性（Transition）1、CSS3中的过渡效果 可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从
21、一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：（1）规定希望把效果添加到哪个 CSS 属性上，过渡效果开始于指定的 CSS 属性值发生改变时（2）规定效果的时长（1）transition简写属性，用于在一个属性中设置四个过渡属性。（2）transition-property规定应用过渡的 CSS 属性的名称。（3）transition-duration定义过渡效果花费的时间。（4）transition-timing-function规定过渡效果的时间曲线。（5）transition-delay规定过渡效果何时开始。3、应用示例transition:width 2s;
22、-moz-transition: /* Firefox 4 */-webkit-transition: /* Safari and Chrome */-o-transition:div:hoverp请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。/p 当将鼠标指向标签时，其宽度将要发生变化（从100px变化为300px），在变化的过程中应用过渡效果宽度逐渐变化。而当指针移出元素时，它会逐渐变回原来的样式（宽度为100px）。1.2.3 CSS3 2D/3D 转换（变形）属性（Transform）1、2D/3D 转换属性通过 CSS3 转换，我们能够对元素（文字或图像）进行移动、缩放、转动、倾斜、拉长或拉伸因为转换是使元素改变形状、尺寸和位置的一种效果。（1）transform向元素应用 2D 或 3D 转换。（2）transform-origin允许你改变被转换元素的位置。（3）transform-style规定被嵌套元素如何在 3D 空间中显示。（4）perspective规定 3D 元素的透视效果。（5）perspective-origin规定 3D 元素的底部位置。（6）backface-visibility定义元素在不面对屏幕时是否可见。3、主要的2D 转换
