第14讲 CSS3高级应用.ppt

《第14讲 CSS3高级应用.ppt》由会员分享，可在线阅读，更多相关《第14讲 CSS3高级应用.ppt（28页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第第10章章 CSS3高级应用高级应用 10.1 在页面中插入内容 10.3 元素变形处理10.2 文字样式控制 10.4 样式过度10.5 更复杂的样式过度10.1 在页面中插入内容在页面中插入内容1.插入文字插入文字使用使用before选择器和选择器和after选择器，可以向所选择的页面元素选择器，可以向所选择的页面元素的前面或后面插入指定文字信息。插入的文字信息，定义在选的前面或后面插入指定文字信息。插入的文字信息，定义在选择器的择器的content属性中。使用属性中。使用content属性不仅可以指定待插属性不仅可以指定待插入的文字信息内容，还可以设置文字信息的样式。入的文字信息内容，

2、还可以设置文字信息的样式。before选择器和选择器和after选择器的应用格式为选择器的应用格式为元素元素:beforecontent:信息内容信息内容元素元素:aftercontent:信息内容信息内容2.插入图像插入图像CSS3在页面中插入图像也是通过在页面中插入图像也是通过before和和after选择器实现，选择器实现，在插入图像时，在插入图像时，content属性赋值为图像文件的路径。属性赋值为图像文件的路径。3.插入项目编号插入项目编号使用使用CSS3插入项目编号通过两个步骤实现，第一步是将选择插入项目编号通过两个步骤实现，第一步是将选择器器content属性设置为属性设置为co

3、unter，第二步是为待插入项目编号，第二步是为待插入项目编号元素添加元素添加counter-increment样式属性。具体的应用格式如样式属性。具体的应用格式如下下元素元素:beforecontent:counter(计数器名称计数器名称);元素元素:counter-increment:计数器名称计数器名称;元素元素:aftercontent:counter(计数器名称计数器名称);元素元素:counter-increment:计数器名称计数器名称;其中计数器的名称可以任意命名，如果没有为元素添加其中计数器的名称可以任意命名，如果没有为元素添加counter-increment属性设置，则

4、所有编号都为属性设置，则所有编号都为0。10.2 文字样式控制文字样式控制1.为文字增加阴影效果为文字增加阴影效果在在CSS3中通过设置中通过设置text-shadow属性，可以为页面中的属性，可以为页面中的文字增加阴影效果。文字增加阴影效果。text-shadow的应用格式如下的应用格式如下text-shadow:len len len color；其中其中len分别用于设置阴影与文字的横向距离、阴影与文分别用于设置阴影与文字的横向距离、阴影与文字的纵向距离以及阴影的模糊半径；字的纵向距离以及阴影的模糊半径；color用于设置阴影用于设置阴影的颜色。的颜色。10.2 文字样式控制文字样式控制

5、2.设置单词及网址自动换行设置单词及网址自动换行使用使用word-wrap属性可设置长单词或网址的自动换行。属性可设置长单词或网址的自动换行。word-wrap的应用格式如下的应用格式如下word-wrap:break-word;当添加了当添加了word-wrap的设置后，遇到行尾为长单词或网的设置后，遇到行尾为长单词或网址，浏览器会自动截断并将剩余部分信息在下一行进行址，浏览器会自动截断并将剩余部分信息在下一行进行显示。显示。3.使用服务器端字体使用服务器端字体CSS3提供了使用服务器端字体的功能，通过该功能最大提供了使用服务器端字体的功能，通过该功能最大程度的保证了网页的通用性。只要服务器

6、端安装了指定的程度的保证了网页的通用性。只要服务器端安装了指定的字体，客户无论在任何一台终端浏览网页，都能够正确显字体，客户无论在任何一台终端浏览网页，都能够正确显示文本字体样式。示文本字体样式。在在CSS3中通过中通过font-face属性来应用服务器端字体，应属性来应用服务器端字体，应用格式如下用格式如下font-facefont-family:WebFont;src:url(path)其中其中font-family属性值设置为属性值设置为WebFont用于声明使用服务器端的字体，用于声明使用服务器端的字体，src指定了服务器端指定了服务器端字体文件所在的路径。字体文件所在的路径。通过通过

7、font-face还可以设置使用客户端本地字体，设置方法为将还可以设置使用客户端本地字体，设置方法为将src属性设置为属性设置为local(paht)。当加入了客户端本地字体设置后，浏览器加载时首先会尝试使用本地字体文件，如果没有。当加入了客户端本地字体设置后，浏览器加载时首先会尝试使用本地字体文件，如果没有找到合适的字体文件时，将使用服务器端字体文件。找到合适的字体文件时，将使用服务器端字体文件。10.3 元素变形处理元素变形处理元素变形在元素变形在CSS3中主要是通过中主要是通过transform属性实现的，属性实现的，在不同浏览器下，在不同浏览器下，transform应用格式有所不同，如

8、下表应用格式有所不同，如下表所示所示浏览器浏览器transform应用格式应用格式Chrome-webkit-transformSafari-webkit-transformOpera-o-transformFirefox-moz-transform1.缩放效果缩放效果 使用使用scale()方法指定缩放倍数可以实现文方法指定缩放倍数可以实现文字或图像的缩放效果。字或图像的缩放效果。scale()方法应用格式为方法应用格式为scale(num)参数参数num指定放大或缩小的倍数，当指定放大或缩小的倍数，当num小于小于1时原文字或时原文字或图像被缩小，否则将放大。图像被缩小，否则将放大。2.旋

9、转效果旋转效果 使用使用rotate()方法指定旋转角度可以实现方法指定旋转角度可以实现文字或图像的缩放效果。文字或图像的缩放效果。rotate()方法应用格式为方法应用格式为rotate(deg)参数参数deg为图像旋转的角度。为图像旋转的角度。3.移动效果移动效果使用使用translate()方法指定水平方向和垂直方向的移动距离，可方法指定水平方向和垂直方向的移动距离，可以实现文字或图像的移动效果。以实现文字或图像的移动效果。translate()方法应用格式为方法应用格式为translate(x,y);参数参数x和参数和参数y分别指定水平方向及垂直方向位移距离。分别指定水平方向及垂直方向

10、位移距离。4.倾斜效果倾斜效果使用使用skew()方法指定水平方向倾斜角度和垂直方向倾斜角度，方法指定水平方向倾斜角度和垂直方向倾斜角度，可以实现文字或图像的倾斜效果。可以实现文字或图像的倾斜效果。skew()方法应用格式为方法应用格式为skew(degX,degY)参数参数degX和参数和参数degY分别指定水平方向及垂直方向倾斜角度。分别指定水平方向及垂直方向倾斜角度。10.4 样式过度样式过度样式过渡指的是将元素样式，从一个指定的属性值平滑过渡样式过渡指的是将元素样式，从一个指定的属性值平滑过渡到另一个指定的属性值。通过样式过渡的应用，可以在页面到另一个指定的属性值。通过样式过渡的应用，

11、可以在页面中实现简单的动画效果。中实现简单的动画效果。CSS3中使用中使用transition属性实现样式过渡，应用格式如下属性实现样式过渡，应用格式如下transition:property duration timing-function参数说明如下参数说明如下property用于设置执行过渡处理的属性用于设置执行过渡处理的属性duration用于设置完成过渡所需要的时间用于设置完成过渡所需要的时间timing-function用于设置过渡的方式。用于设置过渡的方式。transition与与transform属性一样，在应用时需要针对不同属性一样，在应用时需要针对不同的浏览器，增加相应的前

12、缀。的浏览器，增加相应的前缀。10.5 更为复杂的样式过渡更为复杂的样式过渡使用使用animations属性可以实现复杂的样式过度，通过定义多属性可以实现复杂的样式过度，通过定义多个样式转换过程的中间点不同属性值，进而实现相对复杂的动个样式转换过程的中间点不同属性值，进而实现相对复杂的动画效果。使用画效果。使用animations属性需指定关键帧集合名称，变换属性需指定关键帧集合名称，变换间隔以及变换方式。例如间隔以及变换方式。例如-webkit-animation-name:sizeChange;/*设置关键帧设置关键帧集合名称集合名称*/-webkit-animation-duration

13、:3s;/*设置变换间隔设置变换间隔*/-webkit-animation-timing-function:linear;/*设置变设置变换方式换方式*/-webkit-keyframes sizeChange /*关键帧集合关键帧集合*/./关键帧关键帧1定义定义./关键帧关键帧2定义定义 接下来实验接下来实验1.先看几个例题先看几个例题2.实验要求实验要求3.完成实验完成实验例例1 插入文字插入文字例例1 不不插入文字插入文字例例2 插入图像插入图像例例3 插入项目编号插入项目编号例例 4 文字阴影文字阴影例例4 文字阴影文字阴影例例5 设置单词及网址自动换行设置单词及网址自动换行例例 6

14、 缩放效果缩放效果例例7 旋转效果旋转效果不是所有浏览器都支持例例8 移动效果移动效果例例8 倾斜效果倾斜效果例例9 样式过度样式过度例例10 复杂的样式过度复杂的样式过度 动态效果动态效果实验要求实验要求制作一个个性留言板制作一个个性留言板1.使用使用CSS3设置样式，对页面进行美化；设置样式，对页面进行美化；2.留言板包括用户信息，留言信息，用户信息留言板包括用户信息，留言信息，用户信息可以有用户名，头像等；可以有用户名，头像等；3.留言信息于用户信息处于同一行；留言信息于用户信息处于同一行；鼠标移过头像，头像旋转鼠标移过头像，头像旋转90度；度；鼠标移过留言，留言字体效果发生改变，例鼠标移过留言，留言字体效果发生改变，例如增加阴影；如增加阴影；开始实验开始实验