书签分享收藏举报版权申诉 / 21

立即下载加入VIP,免费下载

当前位置：首页 > 经管营销 > 公共行政管理 > 通过代码示例的跟我学应用CSS实现透明度RGBA颜色和动画相关的应用示例.docx

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

文档编号：7382097
上传时间：2023-01-23
格式：DOCX
页数：21
大小：107.47KB

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

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

通过代码示例的跟我学应用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”的动画绑定到某个

元素中。

div{

animation:

mymove5s;

-moz-animation:

mymove5s;/*Firefox*/

-webkit-animation:

mymove5s;/*Safari和Chrome*/

-o-animation:

mymove5s;/*Opera*/

}

在绑定时，必须要定义动画的名称和时长。

因为如果忽略时长，则动画不会允许，默认值是0。

5、应用示例

（1）HTML代码

DOCTYPEhtml>

（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）规定效果的时长

2、主要的属性及功能描述

（1）transition

简写属性，用于在一个属性中设置四个过渡属性。

（2）transition-property

规定应用过渡的CSS属性的名称。

（3）transition-duration

定义过渡效果花费的时间。

（4）transition-timing-function

规定过渡效果的时间曲线。

（5）transition-delay

规定过渡效果何时开始。

3、应用示例

（1）HTML代码

DOCTYPEhtml>

请把鼠标指针放到黄色的div元素上，来查看过渡效果。

（2）执行的结果

当将鼠标指向

标签时，其宽度将要发生变化（从100px变化为300px），在变化的过程中应用过渡效果——宽度逐渐变化。

而当指针移出元素时，它会逐渐变回原来的样式（宽度为100px）。

1.2.3CSS32D/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转换

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 通过代码示例应用 CSS 实现透明度 RGBA 颜色动画相关

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：通过代码示例的跟我学应用CSS实现透明度RGBA颜色和动画相关的应用示例.docx
链接地址：https://www.bdocx.com/doc/7382097.html

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

热门标签