模块10CSS3高级应用电子课件 HTML5网页设计.pptx

《模块10CSS3高级应用电子课件 HTML5网页设计.pptx》由会员分享，可在线阅读，更多相关《模块10CSS3高级应用电子课件 HTML5网页设计.pptx（53页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、模块十CSS3高级应用10.1在页面中插入内容10.1.1 插入文字CSS3提供了before和after两种选择器用以实现在所选择的页面元素前面或者后面插入指定的文字信息，文字信息存放在这些选择器的content属性中。before选择器和after选择器的使用格式如下。元素:beforecontent:文本内容;元素:aftercontent:文本内容;10.1在页面中插入内容10.1.1 插入文字使用before和after选择器实现在标题内容前加入“新闻标题：”，在后面加入日期。例题10.1 插入文本元素 h3:before content:新闻标题：;h3:after content

2、:2018-9-26;font-size:14px;color:#ccc;margin-left:10px;刘德华出任文化亲善大使【例10-1】10.1在页面中插入内容10.1.1 插入文字运行结果如图10-1所示。图10-1【例10-1】在IE浏览器中的运行结果说明：在本实例中，我们对h3标签添加了before和after选择器用于插入文字信息，此样式设置对于页面中的所有h3标签都起作用，如果需要指定的h3元素不应用此样式，那么可以给相应的before和after选择器中的content属性设置值为none或者normal，凡是content属性值为none或normal的标签，其内容显示为

3、空。【例10-1】10.1在页面中插入内容10.1.2 插入图像在使用before和after选择器时，除了可以使用content属性显示文字外，还可以插入图像信息。在CSS3中，图像信息的插入同样使用content属性，与插入文字信息不同的是，插入图像时，需要将content属性值设置为图像文件的路径地址。10.1在页面中插入内容10.1.2 插入图像使用before选择器实现在列表项目前添加项目图标。例题10-2 插入图像元素 ul list-style:none;height:24px;line-height:24px;ul li a color:#333;text-decoration

4、:none;ul li a:hover text-decoration:underline;ul li:before content:url(./images/dot.gif);padding-right:5px;【例10-2】10.1在页面中插入内容10.1.2 插入图像 高举新时代改革开放旗帜 牢记嘱托 把改革开放不断推向深入 今天，第二架C919试飞成功(图)新华社评论员：高举新时代改革开放旗帜 中国“超级工程”港珠澳大桥技术牛在哪？运行结果如图10-2所示。图10-2【例10-2】在IE浏览器中的运行结果【例10-2】10.1在页面中插入内容10.1.3 插入项目编号如果页面中存在多个

5、有序项目，除了使用有序列表实现项目编号外，还可以使用before或者after选择器，为这些项目添加项目编号。要实现项目编号，需要两个步骤：首先将选择器的content属性设置为counter，其次是为准备插入项目编号的元素添加counter-increment样式属性，应用格式如下。元素:before content:counter(计数器名称);元素 counter-increment:计数器名称;10.1在页面中插入内容10.1.3 插入项目编号使用before选择器实现在p标签元素前添加项目编号，格式为“第章”。例题10.3 插入项目编号 p:before content:第count

6、er(count)章;p counter-increment:count;目录 网络操作系统概述 Windows Server 2008系统介绍与安装 本地账号和组管理 【例10-3】10.1在页面中插入内容10.1.3 插入项目编号运行结果如图10-3所示。图10-3【例10-3】在IE浏览器中的运行结果说明：本实例使用before选择器为页面中的所有p元素增加了项目编号，其中，content属性值的设置是为了形成特定的前置项目格式。【例10-3】10.2文字样式控制10.2.1 为文字增加阴影效果在CSS3中，可以通过设置text-shadow属性为页面中的文字内容增加阴影效果，使用格式如

7、下。text-shadow:xpos ypos radius color;说明：xpos表示阴影与文字的横向距离，ypos表示阴影与文字的纵向距离，radius表示阴影的模糊半径，color表示阴影的颜色。10.2文字样式控制10.2.1 为文字增加阴影效果为页面中的h1标题设置阴影效果。例题10.4 文字阴影效果设置 h1 text-shadow:5px 5px 5px#999;阴影文字效果【例10-4】10.2文字样式控制10.2.1 为文字增加阴影效果运行结果如图10-4所示。图10-4【例10-4】在IE浏览器中的运行结果通过设置text-shadow的属性值可以改变阴影的位置和颜色，

8、同时，如果为text-shadow设置多个属性值，可以为文字添加多个阴影效果，多个属性值之间可以使用逗号分开，多个阴影效果设置的代码片段如下。h1 text-shadow:5px 5px 5px#999，10px 10px 10px#666;【例10-4】10.2文字样式控制10.2.2 设置单词及网址自动换行 当我们浏览一些英文类文章的网页时，会注意到浏览器的显示通常会在空格、标点或连字符的位置上自动换行。默认情况下，在显示英文内容时，如果遇到一些长单词或者网址字符串恰好处于行尾且超过浏览器的边界，会通过滚动条的方式显示当前文字。因此，CSS3提供了word-wrap属性，可以设置长单词或网

9、址的自动换行，其使用格式如下。word-wrap:break-word;10.2文字样式控制10.2.2 设置单词及网址自动换行为给定的英文文章设置自动换行属性，实现英文内容的自动换行效果。运行语句见书本P199-200。运行结果如图10-5所示。图10-5【例10-5】在IE浏览器中的运行结果【例10-5】10.2文字样式控制10.2.3 使用服务器端字体CSS3中增加了使用服务器端字体的功能，通过此功能可以最大限度地保证每个浏览者都能获得一致的用户体验，而不需要下载字体。网页设计师只需在服务器端安装指定字体，浏览者在任何一台计算机上浏览网页时，都能正确地显示此字体效果。10.2文字样式控制

10、10.2.3 使用服务器端字体 具体实现时，通常使用font-face属性应用服务器端字体，其使用格式如下。font-face font-family:用户自定义字体名;src:url(字体路径);10.2文字样式控制10.2.3 使用服务器端字体使用服务器端字体实现将页面中的h4标签字体设置为方正喵呜体。例题10.6 服务器端字体 font-face font-family:miaowu;src:url(./font/方正喵呜体.ttf);h4 font-family:miaowu;font-size:24px;这是方正喵呜字体【例10-6】10.2文字样式控制10.2.3 使用服务器端字体

11、运行结果如图10-6所示。图10-6【例10-6】在IE浏览器中的运行结果【例10-6】10.3元素变形处理在CSS3中，我们可以通过设置样式实现元素的旋转、缩放、移动等变形效果，变形效果主要是通过transform属性实现的。由于transform属性对于浏览器的标准支持不全面，因此对不同的浏览器需要设置不同的前缀，见表10-1。表10-1 各浏览器的支持情况10.3元素变形处理10.3.1 缩放效果使用transform属性的scale方法指定缩放倍数可以实现元素的缩放效果，其使用格式如下。transform:scale(xrate，yrate);10.3元素变形处理10.3.1 缩放效果

12、使用CSS3的缩放变形效果实现鼠标指针悬停时导航栏中文本变大的效果。【例10-7】例题10.7 元素缩放效果 ullist-style:none;ul li float:left;width:120px;height:24px;line-height:24px;text-align:center;ul li acolor:#333;text-decoration:none;display:block;ul li a:hover text-decoration:underline;font-weight:bold;transform:scale(1.2，1.2);10.3元素变形处理10.3.1

13、 缩放效果使用CSS3的缩放变形效果实现鼠标指针悬停时导航栏中文本变大的效果。【例10-7】-webkit-transform:scale(1.2，1.2);-moz-transform:scale(1.2，1.2);-o-transform:scale(1.2，1.2);网站首页 公司简介 产品列表 人才招聘 联系我们 10.3元素变形处理10.3.1 缩放效果运行结果如图10-7所示。【例10-7】图10-7 【例10-7】在IE浏览器中的运行结果10.3元素变形处理10.3.2 旋转效果使用transform属性的rotate方法指定旋转度数可以实现元素的旋转效果，其使用格式如下。tra

14、nsform:rotate(deg);其中，deg指顺时针旋转的度数，单位为deg。10.3元素变形处理10.3.2 旋转效果使用CSS3的旋转变形效果结合JavaScript实现风车旋转效果。【例10-8】例题10.8 风车旋转效果 window.onload=function()var deg=0;setInterval(function()deg=deg+5;document.getElementById(fan).style.transform=rotate(+deg+deg);if(deg=360)deg=0;，10);10.3元素变形处理10.3.2 旋转效果运行结果如图10-8所

15、示。【例10-8】图10-8【例10-8】在IE浏览器中的运行结果10.3元素变形处理10.3.3 移动效果 使用transform属性的translate方法指定元素水平方向和垂直方向上的移动距离，可以实现文字或图像的移动效果，其使用格式如下。transform:translate(x，y);说明：x代表在x轴方向上的移动距离，y代表在y轴方向上的移动距离。10.3元素变形处理10.3.3 移动效果使用CSS3的移动效果实现鼠标指针悬停时导航栏中文本偏移的效果。【例10-9】例题10.9 元素偏移效果 ullist-style:none;ul li float:left;width:120p

16、x;height:24px;line-height:24px;text-align:center;ul li acolor:#333;text-decoration:none;display:block;10.3元素变形处理10.3.3 移动效果使用CSS3的移动效果实现鼠标指针悬停时导航栏中文本偏移的效果。【例10-9】ul li a:hover text-decoration:underline;font-weight:bold;transform:translate(3px，3px);-webkit-transform:translate(3px，3px);-moz-transform:

17、translate(3px，3px);-o-transform:translate(3px，3px);网站首页 公司简介 产品列表10.3元素变形处理10.3.3 移动效果运行结果如图10-9所示。【例10-9】人才招聘 联系我们 图10-9【例10-9】在IE浏览器中的运行结果10.3元素变形处理10.3.4 倾斜效果使用transform属性的skew方法指定元素水平方向和垂直方向上的倾斜角度，可以实现元素的倾斜效果，其使用格式如下。transform:skew(xdeg，ydeg);10.3元素变形处理10.3.4 倾斜效果使用CSS3的移动效果实现正方形的水平挤压效果。【例10-10】

18、例题10.10 水平挤压效果 .box width:100px;height:100px;background-color:red;margin-left:100px;transform:translate(30deg，0deg);-webkit-transform:skew(30deg，0deg);-moz-transform:translate(30deg，0deg);-o-transform:translate(30deg，0deg);10.3元素变形处理10.3.4 倾斜效果运行结果如图10-10所示。【例10-10】图10-10【例10-10】在IE浏览器中的运行结果10.4样 式

19、过 渡CSS3提供了样式过渡的效果处理机制，样式过渡是指允许某个元素的一个属性状态从一个值平滑过渡到另一个值，通过这样的样式过渡应用，可以在页面中实现简单的动画效果。CSS3使用transition属性实现样式过渡，使用格式如下。transition:property duration timing-function delay;10.4样 式 过 渡(1)property属性规定应用过渡效果的CSS属性的名称，当指定的CSS属性改变时，过渡效果将开始，注意，过渡效果通常在用户将鼠标指针浮动到元素上时发生，可取的值有如下几种。None：没有属性获得过渡效果。All：所有属性获得过渡效果。Pro

20、perty：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。10.4样 式 过 渡(2)duration属性规定完成过渡效果需要花费的时间，以秒或毫秒计，默认值为0，即不会有效果。(3)timing-function属性规定过渡效果的速度曲线，该属性允许过渡效果随着时间来改变其速度。(4)delay属性规定过渡效果何时开始，取值以秒或毫秒计。10.4样 式 过 渡使用CSS3的样式过渡效果实现鼠标指针悬停时图形宽度渐变效果。【例10-11】例题10.11 样式过渡 .box width:100px;height:100px;background-color:red;transition:

21、width 1s linear;.box:hover width:200px;10.4样 式 过 渡运行结果如图10-11所示。【例10-11】图10-11【例10-11】在IE浏览器中的运行结果10.5animation复杂动画实现1.定义keyframes规则keyframes规则用于创建动画，在keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果，语法如下。参数描述见表10-2。keyframes animationnamekeyframes-selectorcss-styles;表10-2 keyframe参数说明10.5animation复杂动画实现1.

22、定义keyframes规则下面分别就两种情况进行举例，第一种情况使用from-to方式，语法如下。keyframes mymove fromtop:0px;totop:200px;第二种情况使用百分比方式，语法如下。keyframes mymove 0%top:0px;25%top:200px;50%top:100px;75%top:200px;100%top:0px;10.5animation复杂动画实现2.设置animation属性在定义完keyframes规则后，可以在元素中设置animation属性应用此动画规则，使用语法如下。animation:name duration timin

23、g-function delay iteration-count direction;参数描述见表10-3。表10-3 animation属性参数说明10.5animation复杂动画实现使用CSS3中的animation动画实现小球的跌落效果，并能够模拟弹起过程。【例10-12】例题10.12 animation动画 .desk width:300px;height:100px;background-color:red;position:absolute;left:0px;top:150px;.ball width:50px;height:50px;border-radius:50px;ba

24、ckground-color:green;position:absolute;10.5animation复杂动画实现使用CSS3中的animation动画实现小球的跌落效果，并能够模拟弹起过程。【例10-12】animation:fall 2s linear 0s;animation-fill-mode:forwards;keyframes fall 0%top:0px;50%top:100px;75%top:75px;100%top:100px;10.5animation复杂动画实现运行结果如图10-12所示。【例10-12】图10-12【例10-12】在IE浏览器中的运行结果10.6案例【

25、案例描述】利用所给定的素材，制作一个交通灯效果的CSS3动画，以实现交通灯依次由红转黄再转绿，然后小车从左至右的动画效果。10.6案例【源代码展示】具体见书本P213-216。【运行结果】运行结果如图10-13所示。图10-13 模块10案例在IE浏览器中的运行结果10.6案例【分析】本案例使用CSS3动画实现了交通信号灯及汽车行驶的两处动画效果。在具体实现过程中，首先通过HTML页面结构代码和样式代码完成页面背景和交通灯及小车的页面效果;随后为红灯、黄灯和绿灯分别制作关键帧动画，通过设置元素animation属性的延时值完成灯的交替显示效果；最后使用关键帧动画完成小车从左至右的行驶动画。10

26、.7思考与练习一、选择题1.若想要使用CSS3语法在元素的前面添加内容，则可以选择()选择器。A.:before B.:after C.:pre D.:last2.在CSS3中，通常使用()属性设置文字的阴影效果。A.shadow B.box-shadowC.font-shadow D.text-shadow3.与CSS2中只能将特殊字体制作成图片显示不同，CSS3中可以使用服务器端字体显示特殊字体，具体是通过()属性实现的。A.font-family B.font-style C.font-face D.font-face10.7思考与练习4.()不是transform的方法。A.trans

27、late B.fade C.skew D.rotate5.为了使animation动画执行结束后停在原地，而不是回到初始位置，可以将其animation-fill-mode属性值设置为()。A.forwards B.stop C.pause D.backwards二、填空题1.在文字排版过程中，系统默认会将超过显示的内容换行，可以通过将 属性设置成 值实现文字自动换行功能。2.如果想使用CSS3将某一个元素缩小一半，则可以使用的样式为：。10.7思考与练习3.CSS3对不同的浏览器兼容性有较大的区别，其中在 浏览器中支持度较差。4.transform属性用以实现元素的变形处理，其中 方法可以实现元素的缩放效果，方法可以实现元素的旋转效果。5.CSS3可以实现基本的动画效果，使用 来定义动画规则，使用 来实现所定义的动画规则。三、简答题1.简述服务器端字体使用的优点及使用场景。2.简述在CSS3中如何实现animation复杂动画效果。10.7思考与练习四、操作题在网上搜索若干张图片，制作照片墙效果，要求如下。(1)自定义照片墙中每张图片的尺寸，建议图片的宽度不超过120像素。(2)自定义图片的放置位置和角度，应有错落有致的效果。(3)利用CSS3变形、过渡或动画中的一种或多种方法实现动画效果。THANKS