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

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

《通过代码示例的跟我学应用CSS实现透明度RGBA颜色和动画相关的应用示例.docx》由会员分享，可在线阅读，更多相关《通过代码示例的跟我学应用CSS实现透明度RGBA颜色和动画相关的应用示例.docx（21页珍藏版）》请在冰豆网上搜索。

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

目录

1.1CSS3中的透明度、RGBA颜色相关应用示例2

1.1.1CSS3中的透明度、RGBA颜色2

1.1.2CSS3渐变及应用示例5

1.2CSS3动画相关应用示例7

1.2.1CSS3动画属性（Animation）及应用7

1.2.2CSS3中的过渡属性（Transition）11

1.2.3CSS32D/3D转换（变形）属性（Transform）13

1.3图标字体19

1.3.1web界面设计的免费图标字体19

1.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;}

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）;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的效果是一样的

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:

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）CSS3HSLA

HSLA就是在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;

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种写法

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为结束点；第二个参数表示该点的颜色。

（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（[||,]?

,[,]）;

其中的-o-linear-gradient有三个参数。

第一个参数表示线性渐变的方向——top是从上到下、left是从左到右，如果定义成lefttop，那就是从左上角到右下角。

第二个和第三个参数分别是起点颜色和终点颜色。

还可以在它们之间插入更多的参数，表示多种颜色的渐变。

（2）示例代码

background:

-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;background:

red;width:

100px;}

100%{top:

200px;background:

yellow;width:

300px;}

}

@-moz-keyframesmymove{/*Firefox*/

0%{top:

0px;background:

red;width:

100px;}

100%{top:

200px;background:

yellow;width:

300px;}

}

@-webkit-keyframesmymove{/*Safari和Chrome*/

0%{top:

0px;background:

red;width:

100px;}

100%{top:

200px;background:

yellow;width:

300px;}

}

@-o-keyframesmymove{/*Opera*/

0%{top:

0px;background:

red;width:

100px;}

100%{top:

200px;background:

yellow;width:

300px;}

}

4、将所创建出的动画绑到某个元素中

下面的示例实现将前面创建出的名称为“mymove”的动画绑定到某个