通过代码示例的跟我学应用CSS实现透明度RGBA颜色和动画相关的应用示例Word格式文档下载.docx
《通过代码示例的跟我学应用CSS实现透明度RGBA颜色和动画相关的应用示例Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《通过代码示例的跟我学应用CSS实现透明度RGBA颜色和动画相关的应用示例Word格式文档下载.docx（21页珍藏版）》请在冰豆网上搜索。
div.opacityL5{background:
1.0;
（4）CSS3透明
我们也可以在图片上使用不同透明度的透明效果，就像上面的示例一样。
一个很酷的应用是将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中的最后一个值——允许我们设置该元素的透明度（通道Alpha）。
就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。
（2）CSS3RGBA色彩
上面的效果有以下样式实现：
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.rgbaL5{background:
rgba（153,134,117,1.0）;
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的效果是一样的
RGBA和HSLA的类似，是在RGB的基础上多了个控制alpha透明度的参数，取值在0到1之间。
（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）CSS3HSLA
HSLA就是在HSL的基础上多了个控制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定义颜色透明度，示例如下：
background-color:
hsl（0,100%,50%）;
opacity0.2;
hsl（240,100%,50%）;
hsl（120,100%,50%）;
1.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种写法
-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为结束点；
第二个参数表示该点的颜色。
（2）第二种写法
这种写法比较简单，而且效果比较自然。
-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%）;
-webkit-gradient（linear,00,08%,from（red）,to（blue））;
则背景色会从0%到8%由红色到蓝色线性渐变，8%到100%为纯蓝色blue。
5、线性渐变在Opera浏览器下的应用
（1）语法
-o-linear-gradient（[<
point>
||<
angle>
]?
<
stop>
<
[,<
]）;
其中的-o-linear-gradient有三个参数。
第一个参数表示线性渐变的方向——top是从上到下、left是从左到右，如果定义成lefttop，那就是从左上角到右下角。
（2）示例代码
-o-linear-gradient（top,#ccc,#000）;
6、IE浏览器中实现渐变
在IE浏览器中实现渐变，只能使用IE自己的滤镜技术实现。
下面为语法格式：
filter:
progid:
DXImageTransform.Microsoft.gradient（startColorstr=＃00ffff,
endColorstr=＃9fffff,
grandientType=1）;
其中的第一个参数代表渐变起始位置的颜色，而第二个参数代表渐变终止位置的颜色，第三个参数代表渐变的类型——0代表竖向渐变，1代表横向渐变。
1.2CSS3动画相关应用示例
1.2.1CSS3动画属性（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规定动画是否在下一周期逆向地播放
动画在循环中是否反向运动，取值为normal代表正向方向；
而取值为alternate，代表与反向交替运动，具体为第偶数次正向运动，第奇数次向反方向运动，默认为normal。
（9）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的语法
@keyframesanimationname{keyframes-selector{css-styles;
}}
其中的animationname定义动画的名称，为必需的值；
而keyframes-selector也是必需的，代表动画时长的百分比——合法的值：
0-100%、from（与0%相同）、to（与100%相同）；
css-styles参数也是必需的，代表一个或多个合法的CSS样式属性。
下面的示例实现在一个动画中改变多个CSS样式：
@keyframesmymove{
0%{top:
0px;
red;
}
100%{top:
200px;
yellow;
300px;
@-moz-keyframesmymove{/*Firefox*/
@-webkit-keyframesmymove{/*Safari和Chrome*/
@-o-keyframesmymove{/*Opera*/
4、将所创建出的动画绑到某个元素中
下面的示例实现将前面创建出的名称为“mymove”的动画绑定到某个<
div>
元素中。
div{
animation:
mymove5s;
-moz-animation:
/*Firefox*/
-webkit-animation:
/*Safari和Chrome*/
-o-animation:
/*Opera*/
在绑定时，必须要定义动画的名称和时长。
因为如果忽略时长，则动画不会允许，默认值是0。
5、应用示例
（1）HTML代码
<
!
DOCTYPEhtml>
html>
head>
style>
width:
height:
position:
relative;
mymove5sinfinite;
/*Firefox*/
/*SafariandChrome*/
@-moz-keyframesmymove{/*Firefox*/
@-webkit-keyframesmymove{/*SafariandChrome*/
@-o-keyframesmymove{/*Opera*/
/style>
/head>
body>
/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）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都表现出动画的特征，但实际上，它们仍有很大的区别：
（1）transition需要经过用户触发才会表现出动态的效果
这些触发条件可以是:
link、:
visited、:
hover、:
active和:
focus五个CSS伪类，也可以是click、focus等JavaScirpt事件，如果没有设置触发条件而直接给元素设置transition，用户只能看到元素的终态而没有动画过程。
（2）animation则无须触发条件，开发者只需为元素绑定动画即可。
1.2.2CSS3中的过渡属性（Transition）
1、CSS3中的过渡效果
可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
要实现这一点，必须规定两项内容：
（1）规定希望把效果添加到哪个CSS属性上，过渡效果开始于指定的CSS属性值发生改变时
（2）规定效果的时长
（1）transition
简写属性，用于在一个属性中设置四个过渡属性。
（2）transition-property
规定应用过渡的CSS属性的名称。
（3）transition-duration
定义过渡效果花费的时间。
（4）transition-timing-function
规定过渡效果的时间曲线。
（5）transition-delay
规定过渡效果何时开始。
3、应用示例
transition:
width2s;
-moz-transition:
/*Firefox4*/
-webkit-transition:
/*SafariandChrome*/
-o-transition:
div:
hover{
p>
请把鼠标指针放到黄色的div元素上，来查看过渡效果。
/p>
当将鼠标指向<
标签时，其宽度将要发生变化（从100px变化为300px），在变化的过程中应用过渡效果——宽度逐渐变化。
而当指针移出元素时，它会逐渐变回原来的样式（宽度为100px）。
1.2.3CSS32D/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转换
升级会员 