HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第8章 全新的网页视听技术_第1页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第8章 全新的网页视听技术_第2页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第8章 全新的网页视听技术_第3页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第8章 全新的网页视听技术_第4页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第8章 全新的网页视听技术_第5页
已阅读5页，还剩167页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第8章全新的网页视听技术《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target了解视频和音频嵌入技术，能够说出各主流浏览器支持<video>和<audio>标签的版本了解浏览器对视频和音频文件的兼容性，能够说出浏览器支持的视频和音频格式。知识目标技能目标掌握HTML5中视频、音频的嵌入方法，并能够应用到网页制作中理解过渡属性，能够控制过渡效果持续的时间等。学习目标/Target掌握变形属性，能够制作2D变形、3D变形效果。掌握动画制作方法，能够熟练制作网页中常见的动画效果。技能目标素养目标通过对网页视听技术的学习，提升对视听内容的审美鉴赏能力。章节概述/Summary在网络飞速发展的今天，互动、互联、互通的网页多媒体新生态正在形成。视频、音频动画已经被越来越广泛地应用到网页设计中。比起静态的图片和文字，视频、音频、动画可以为用户提供更直观、丰富的信息，为其带来全新的感受。本章将对网页中的视频、音频、动画等视听技术进行详细讲解。目录/Contents010203案例8-1影视播放页面案例8-2导航栏鼠标指针悬停特效案例8-3翻牌动画04案例8-4太阳笑脸影视播放页面案例8-1案例描述随着互联网的发展和传统影视公司的介入，网络电影飞速发展。网络电影摒弃了传统的电影胶片，将数字媒体技术和网页技术完美地结合，给我们耳目一新的体验。本案例将运用<video>标签制作一个简单的影视播放页面，效果如图。知识引入了解视频和音频嵌入技术，能够说出各主流浏览器支持<video>和<audio>标签的版本。学习目标1.视频和音频嵌入技术概述知识引入在<video>、<audio>标签出现之前，W3C并没有制定将视频和音频嵌入页面的标准，视频、音频内容在大多数情况下都是通过插件或浏览器的应用程序嵌入页面中的。例如，可以运用Adobe的FlashPlayer插件将视频和音频嵌入网页中。这种方式不仅需要借助插件，而且实现代码复杂、冗长，下图所示为通过插件嵌入视频的代码。1.视频和音频嵌入技术概述知识引入使用<video>标签嵌入视频的代码，仅需要1行代码就可以实现视频的嵌入，让网页的代码结构变得清晰、简单。1.视频和音频嵌入技术概述知识引入各主流浏览器对<video>和<audio>的支持情况如表。1.视频和音频嵌入技术概述浏览器支持版本IE浏览器9.0及以上版本Firefox浏览器3.5及以上版本Opera浏览器10.5及以上版本Chrome浏览器3.0及以上版本Safari浏览器3.1及以上版本知识引入在不同的浏览器上运用<video>或<audio>标签时，浏览器显示的视频、音频界面样式也略有不同。下图分别为Firefox浏览器视频播放效果和Chrome浏览器视频播放效果。1.视频和音频嵌入技术概述知识引入了解视频嵌入技术，能够说出<video>标签支持3种视频格式。学习目标2.嵌入视频知识引入在HTML5中，<video>标签支持3种视频格式，分别为OGG、WebM和MP4。使用<video>标签嵌入视频的基本语法格式如下。2.嵌入视频<videosrc="视频文件路径"controls="controls"></video>用于设置视频文件路径用于控制是否显示播放控件知识引入下面通过代码演示嵌入视频的方法，如例example01.html。2.嵌入视频<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>在网页中嵌入视频</title></head><body><videosrc="video/pian.mp4"controls="controls">浏览器不支持video标签</video></body></html>知识引入运行示例代码，效果如图所示。2.嵌入视频知识引入视频界面底部是浏览器默认添加的播放控件，用于控制视频播放的状态。当单击按钮时，网页就会播放视频，效果如图。2.嵌入视频知识引入在<video>标签中添加其他属性，从而进一步优化视频的播放效果，具体如表。2.嵌入视频属性属性值描述autoplayautoplay当页面载入完成后自动播放视频looploop视频结束时重新开始播放preloadauto/metadata/none预加载视频，并预备播放；如果使用autoplay属性，则浏览器忽略preload属性。auto表示自动预加载；meta表示仅预加载元数据；none表示不预加载知识引入2.嵌入视频属性属性值描述posterURL当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来mutedmuted视频静音知识引入下面在例example01.html的基础上对<video>标签应用新属性，进一步优化视频播放效果，修改后的代码如下。2.嵌入视频<videosrc="video/pian.mp4"controls="controls"autoplay="autoplay"loop="loop">浏览器不支持video标签</video>知识引入了解音频嵌入技术，能够说出<audio>标签支持3种音频格式。学习目标3.嵌入音频知识引入在HTML5中，<audio>标签支持3种音频格式，分别为OGG、MP3和WAV。使用<audio>标签嵌入音频的基本语法格式如下。<audiosrc="音频文件路径"controls="controls"></audio>3.嵌入音频知识引入下面通过代码演示嵌入音频的方法，如例example02.html。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>在网页中嵌入音频</title></head><body><audiosrc="music/1.mp3"controls="controls">浏览器不支持audio标签</audio></body></html>3.嵌入音频知识引入运行示例代码，效果如图。3.嵌入音频知识引入在<audio>标签中添加其他属性，从而进一步优化音频的播放效果，具体如表。3.嵌入音频属性属性值描述autoplayautoplay当页面载入完成后自动播放音频looploop音频结束时重新开始播放preloadauto/meta/none预加载音频，并预备播放；如果使用autoplay属性，则浏览器忽略preload属性。auto表示自动预加载；meta表示仅预加载元数据；none表示不预加载知识引入了解浏览器对视频和音频文件的兼容性，能够说出浏览器支持的视频和音频格式。学习目标4.浏览器对视频和音频文件的兼容性虽然HTML5支持OGG、MP4和WebM这3种视频格式以及OGG、MP3和WAV这3种音频格式，但并不是所有的浏览器都支持这些格式，因此在嵌入视频、音频文件时，要考虑浏览器的兼容性问题。知识引入4.浏览器对视频和音频文件的兼容性在HTML5中，运用<source>标签可以为<video>标签或<audio>标签提供备用文件。运用<source>标签添加视频文件的基本语法格式如下。知识引入4.浏览器对视频和音频文件的兼容性<videocontrols="controls"><sourcesrc="视频文件地址"type="媒体文件类型/格式"><sourcesrc="视频文件地址"type="媒体文件类型/格式"> …</video><source>标签一般设置两个属性——src和type，对它们的具体介绍如下。知识引入4.浏览器对视频和音频文件的兼容性type：指定媒体文件的类型和格式。其中类型可以为“video”或“audio”，格式为视频或音频文件的格式类型。12src：用于指定视频文件地址。例如，将OGG格式和MP4格式的视频同时嵌入页面中，示例代码如下。知识引入4.浏览器对视频和音频文件的兼容性<videocontrols="controls"><sourcesrc="video/1.ogg"type="video/ogg"><sourcesrc="video/1.mp4"type="video/mp4"></video>运用<source>标签添加音频的方法和添加视频的方法基本相同，只需要把<video>标签换成<audio>标签即可，其语法格式如下。知识引入4.浏览器对视频和音频文件的兼容性<audiocontrols="controls"><sourcesrc="音频文件地址"type="媒体文件类型/格式"><sourcesrc="音频文件地址"type="媒体文件类型/格式">…</audio>例如，将MP3格式和WAV格式的音频同时嵌入页面中，示例代码如下。知识引入4.浏览器对视频和音频文件的兼容性<audiocontrols="controls"><sourcesrc="music/1.mp3"type="audio/mp3"><sourcesrc="music/1.wav"type="audio/wav"></audio>知识引入了解控制视频宽度和高度，能够说出浏览器支持的视频和音频格式。学习目标5.控制视频宽度和高度在网页中嵌入视频时，经常需要控制视频的宽度和高度，从而使浏览器在加载页面时预先确定视频的大小，保证页面布局的统一。控制视频宽度、高度的方法十分简单，可以运用width和height属性直接为<video>标签设置宽度和高度。知识引入5.控制视频宽度和高度下面通过代码演示如何控制视频的宽度和高度，如例example03.html。知识引入<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>控制视频的宽度和高度</title><style>*{margin:0;padding:0;}5.控制视频宽度和高度知识引入div{width:600px;height:300px;border:1pxsolid#000;}video{width:200px;height:300px;background:#F90;float:left;}5.控制视频宽度和高度知识引入p{width:200px;height:300px;background:#999;float:left;}</style></head><body>5.控制视频宽度和高度知识引入<body><div><p>占位色块</p><videosrc="video/pian.mp4"controls="controls">浏览器不支持video标签</video><p>占位色块</p></div></body></html>5.控制视频宽度和高度运行示例代码，效果如图。知识引入5.控制视频宽度和高度更改example03.html中的代码，删除视频的宽度和高度属性，修改后的代码如下。知识引入5.控制视频宽度和高度video{background:#F90;float:left; }保存HTML文件，刷新页面，效果如图。知识引入5.控制视频宽度和高度注意：通过width和height属性来缩放视频后，虽然视频在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（例如格式工厂）对视频进行压缩。知识引入5.控制视频宽度和高度项目实现了解视频和音频的操作，能够运用<video>标签制作一个简单的影视播放页面。学习目标项目实现导航栏鼠标指针悬停特效案例8-2案例描述CSS提供了强大的过渡属性（CSS3属性），可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变到另一种样式添加效果，例如渐显、渐隐、速度变化等。本案例将运用过渡属性制作一个绚丽的导航栏鼠标指针悬浮特效，导航栏效果如图。当鼠标指针悬停至导航项上时，导航项呈现下图所示的内阴影效果。知识引入掌握transition-property属性，能够独立演示transition-property属性的用法。学习目标1.transition-property属性知识引入transition-property属性用于设置应用过渡效果的CSS属性，其基本语法格式如下。1.transition-property属性transition-property:none|all|property;取值包括none、all和property知识引入transition-property属性值如表。1.transition-property属性属性值描述none没有属性会应用过渡效果all所有属性都将应用过渡效果property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔知识引入下面通过代码演示transition-property属性的用法，如例。1.transition-property属性<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>transition-property属性</title><style>div{width:400px;

height:100px;background-color:red;font-weight:bold;color:#FFF;}知识引入1.transition-property属性div:hover{background-color:blue;transition-property:background-color;/*指定应用过渡效果的CSS属性*/}</style></head><body><div>使用transition-property属性改变元素背景颜色</div></body></html>知识引入运行示例代码，默认效果如图。1.transition-property属性知识引入使用不同内核的浏览器，其私有前缀并不相同。由于W3C每提出一个新属性，都需要经过一个耗时且复杂的标准制定流程。在标准还未确定时，部分浏览器已经根据最初的草案实现了新属性的功能，为了与之后确定的标准兼容，各浏览器会使用私有前缀将自己的属性与标准中的属性进行区分。当标准确定后，各大浏览器再逐步支持不带私有前缀的新属性。1.transition-property属性浏览器私有前缀知识引入下表列举了主流浏览器的私有前缀。1.transition-property属性浏览器私有前缀私有前缀浏览器-webkit-Safari和Chrome浏览器-moz-Firefox浏览器-ms-IE浏览器-o-Opera浏览器知识引入例如，若想兼容老版本的浏览器，例8-5中的transition-property属性可以写为。1.transition-property属性浏览器私有前缀-webkit-transition-property:background-color;/*Safari和Chrome浏览器兼容代码*/-moz-transition-property:background-color;/*Firefox浏览器兼容代码*/-ms-transition-property:background-color;/*IE浏览器兼容代码*/-o-transition-property:background-color;/*Opera浏览器兼容代码*/

知识引入掌握transition-duration属性，能够独立演示transition-duration属性的用法。学习目标2.transition-duration属性知识引入transition-duration属性用于定义过渡效果持续的时间，其基本语法格式如下。transition-duration:time;默认值为0，其取值为时间，常用单位是秒（s）或者毫秒（ms）2.transition-duration属性知识引入例如，用下面的示例代码替换例8-5中的对应代码。div:hover{background-color:blue;/*指定应用过渡效果的CSS属性*/transition-property:background-color;/*指定过渡效果持续的时间*/transition-duration:5s;}2.transition-duration属性知识引入掌握transition-timing-function属性，能够独立演示transition-timing-function属性的用法。学习目标3.transition-timing-function属性知识引入transition-timing-function属性用于规定过渡效果的速度曲线，其基本语法格式如下。transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);3.transition-timing-function属性知识引入transition-timing-function属性的取值有很多，其中默认值为ease，其常见属性值如表。3.transition-timing-function属性属性值描述linear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)ease指定以慢速开始，中间加速，结束前快速减速的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）ease-in指定以慢速开始，然后逐渐加快的过渡效果，等同于cubic-bezier(0.42,0,1,1）知识引入3.transition-timing-function属性属性值描述ease-out指定以慢速结束的过渡效果，等同于cubic-bezier(0,0,0.58,1）ease-in-out指定以慢速开始，中间加速，结束前平滑减速的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）cubic-bezier(n,n,n,n)定义用于控制速度的贝塞尔曲线的形状，n的值为0～1知识引入下面通过代码演示transition-timing-function属性的用法，如例example05.html。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>transition-timing-function属性</title>3.transition-timing-function属性知识引入<style>div{width:424px;height:406px;margin:0auto;background:url(images/HTML5.png)centercenterno-repeat;border:5pxsolid#333;border-radius:0px;}3.transition-timing-function属性知识引入div:hover{border-radius:50%;transition-property:border-radius;/*指定应用过渡效果的CSS属性*/transition-duration:2s;/*指定过渡效果持续的时间*/transition-timing-function:ease-in-out;/*指定以慢速开始和结束的过渡效果*/}</style></head>3.transition-timing-function属性知识引入<body><div></div></body></html>3.transition-timing-function属性知识引入运行例example05.html，当鼠标指针悬停到网页中的<div>区域时，过渡效果将会被触发，方形将以慢速开始，中间加速，结束前平滑减速变为圆形，如图。3.transition-timing-function属性知识引入掌握transition-timing-function属性，能够独立演示transition-timing-function属性的用法。学习目标4.transition-delay属性知识引入transition-delay属性用于规定过渡效果的开始时间，其基本语法格式如下。transition-delay:time;4.transition-delay属性transition-delay属性默认值为0，常用单位是秒或者毫秒。transition-delay的属性值可以为正数、负数和0。当设置为负数时，过渡效果会从负数的绝对值时间点开始，之前的过渡效果会被跳过；当设置为正数时，过渡效果会延迟触发知识引入下面在例example05.html的基础上演示transition-delay属性的用法，在第22行代码后增加下列代码。transition-delay:2s;4.transition-delay属性指定过渡效果会延迟2秒触发知识引入掌握transition属性，能够独立演示transition属性的用法。学习目标5.transition属性知识引入transition属性是一个复合属性，可同时设置transition-property、transition-duration、transition-timingtransition属性-function、transition-delay这4个过渡属性，其基本语法格式如下：transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;5.transition属性例如，例example05.html中设置的4个过渡属性可以直接通过如下代码实现：transition:border-radius2sease-in-out2s;注意：无论使用单个属性还是复合属性，都可以实现多种过渡效果。如果使用transition复合属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。知识引入5.transition属性项目实现了解常见布局方式，能够运用浮动和定位的相关知识制作一个采用3列布局的鲜花网站首页。学习目标项目实现翻牌动画案例8-3案例描述在CSS3中，通过变形属性可以对元素进行平移、缩放、倾斜和旋转等操作。此外，变形属性可以和过渡属性结合，实现丰富的网页动画效果。本案例将运用变形属性制作一个翻牌动画，当鼠标指针移至卡牌时，卡牌会实现翻转，效果如图。知识引入掌握变形属性，能够制作2D变形效果。学习目标1.2D变形知识引入在CSS3中，2D变形主要包括4种变形效果，分别是平移、缩放、倾斜、旋转。在进行2D变形时，还可以更改该变形元素的中心点，以实现不同的变形效果。1.2D变形平移缩放倾斜旋转更改中心点知识引入平移是指元素位置发生变化，包括水平移动和垂直移动。在CSS3中，使用translate()方法可以实现元素平移效果，基本语法格式如下。1.2D变形平移01transform:translate(x-value,y-value);知识引入在使用translate()方法移动元素时，坐标点默认为元素中心点，然后根据指定的x轴坐标和y轴坐标进行移动，translate()方法平移示意如下图所示。在图中，①表示平移前的元素，②表示平移后的元素。1.2D变形平移01知识引入下面通过代码演示translate()方法的使用，如例example06.html。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>translate()方法</title><style>div{width:100px;height:50px;background-color:#0CC;}1.2D变形平移01知识引入下面通过代码演示translate()方法的使用，如例example06.html。#div2{transform:translate(100px,30px);}</style></head><body><div>盒子1未平移</div><divid="div2">盒子2平移</div></body></html>1.2D变形平移01知识引入运行示例代码，效果如图。1.2D变形平移01注意：translate()方法中参数值的单位不可以省略，否则将不起作用。知识引入1.2D变形平移01知识引入在CSS3中，使用scale()方法可以实现元素缩放效果，基本语法格式如下。1.2D变形缩放02transform:scale(x-value,y-value);定义元素在x轴方向的缩放倍速定义元素在y轴方向的缩放倍速知识引入下面通过代码演示scale()方法的使用，如例example07.html。1.2D变形缩放02<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>scale()方法</title>知识引入1.2D变形缩放02<style>div{width:100px;height:50px;background-color:#FF0;border:1pxsolidblack;}知识引入1.2D变形缩放02#div2{margin:100px;transform:scale(2,3);}</style></head>知识引入1.2D变形缩放02<body><div>我是原来的元素</div><divid="div2">我是放大后的元素</div></body></html>知识引入运行示例代码，效果如图。1.2D变形缩放02知识引入在CSS3中，使用skew()方法可以实现元素倾斜效果，基本语法格式如下。1.2D变形倾斜03transform:skew(x-value,y-value);定义元素在x轴方向的倾斜角度定义元素在y轴方向的倾斜角度知识引入skew()方法倾斜示意如下图所示。其中，实线框表示倾斜前的元素，虚线框表示倾斜后的元素。1.2D变形倾斜03知识引入下面通过代码演示skew()方法的使用，如例example08.html。1.2D变形倾斜03<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>skew()方法</title>知识引入1.2D变形倾斜03<style>div{width:100px;height:50px;margin:0auto;background-color:#F90;border:1pxsolidblack;}知识引入1.2D变形倾斜03#div2{transform:skew(30deg,10deg);}</style></head><body><div>我是原来的元素</div><divid="div2">我是倾斜后的元素</div></body></html>知识引入运行示例代码，效果如图。1.2D变形倾斜03知识引入在CSS3中，使用rotate()方法可以旋转指定的元素，基本语法格式如下。1.2D变形旋转04transform:rotate(angle);表示要旋转的角度值，单位为deg知识引入rotate()方法旋转示意如下图所示。其中，实线框表示旋转前的元素，虚线框表示旋转后的元素。1.2D变形旋转04知识引入例如为某个div元素设置按顺时针方向旋转30°，具体代码如下。1.2D变形旋转04div{ transform:rotate(30deg);}注意：如果一个元素需要设置多种变形效果，可以用空格把多个变形参数值隔开。知识引入1.2D变形旋转04知识引入通过transform属性可以实现元素的平移、缩放、倾斜和旋转效果，这些变形效果都基于元素的中心点。默认情况下，元素的中心点在x轴和y轴的50%位置。如果需要更改中心点，可以使用transform-origin属性，其基本语法格式如下。1.2D变形更改中心点05transform-origin:x-axisy-axisz-axis;知识引入transform-origin属性包含3个参数，其默认值分别为50%、50%、0px，具体如表。1.2D变形更改中心点05参数描述x-axis定义元素中心点被置于x轴的何处，参数值可以是百分比数值、倍率值、像素值等具体的值，也可以是top、right、bottom、left和center这样的关键字y-axis定义元素中心点被置于y轴的何处，参数值可以是百分比数值、倍率值、像素值等具体的值，也可以是top、right、bottom、left和center这样的关键字z-axis定义元素中心点被置于z轴的何处，需要注意的是，参数值不能是一个百分比数值，否则将会被视为无效值，一般为像素值知识引入下面通过代码来演示transform-origin属性的使用，如例。1.2D变形更改中心点05<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>transform-origin属性</title>知识引入1.2D变形更改中心点05<style>#div1{

position:relative;width:200px;height:200px;margin:100pxauto;padding:10px;border:1pxsolidblack;}知识引入1.2D变形更改中心点05#box02{padding:20px;position:absolute;border:1pxsolidblack;background-color:red;transform:rotate(45deg);

transform-origin:20%40%;

}知识引入1.2D变形更改中心点05#box03{padding:20px;position:absolute;border:1pxsolidblack;background-color:#FF0;transform:rotate(45deg);

/*旋转45°*/

}</style></head>知识引入1.2D变形更改中心点05<body><divid="div1"><divid="box02">更改中心点</div><divid="box03">未更改中心点</div></div></body></html>知识引入运行示例代码，效果如图。1.2D变形更改中心点05知识引入掌握变形属性，能够制作3D变形效果。学习目标2.3D变形知识引入2D变形是元素围绕x轴和y轴的变化，而3D变形是元素围绕x轴、y轴、z轴的变化。相比于平面上的2D变形，3D变形更注重于空间位置的变化。2.3D变形rotateX()rotateY()rotate3d()perspective属性知识引入在CSS3中，rotateX()可以让指定元素围绕x轴旋转，基本语法格式如下。rotateX()01transform:rotateX(a);2.3D变形用于定义旋转的角度，单位为deg，取值可以是正值也可以是负值知识引入下面通过代码来演示rotateX()的使用，如例example10.html。rotateX()01<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>rotateX()方法</title>2.3D变形知识引入rotateX()01<style>div{width:250px; height:50px; background-color:#FF0; border:1pxsolidblack;}2.3D变形知识引入rotateX()01div:hover{transition:all1sease2s;

transform:rotateX(60deg);}</style></head><body><div>元素旋转</div></body></html>2.3D变形设置过渡效果知识引入运行示例代码，当鼠标指针悬停于元素时，元素将围绕x轴旋转，效果如图。rotateX()012.3D变形知识引入下面在例example10.html的基础上演示元素围绕y轴旋转。将例example10.html中的第15行代码更改为。rotateY()022.3D变形transform:rotateY(60deg);保存文件并刷新页面，元素将围绕y轴顺时针旋转60°。知识引入2.3D变形rotateY()02注意：rotateZ()、rotateX()、rotateY()的功能相似，区别在于rotateZ()用于指定一个元素围绕z轴旋转。如果仅从视觉角度来看，rotateZ()指定元素顺时针或逆时针旋转，与rotate()效果等同，但rotateZ()指定的不是在2D平面上的旋转。知识引入rotate3d()是由rotateX()、rotateY()和rotateZ()演变而来的，用于设置多个轴的3D旋转，例如要同时设置围绕x轴和y轴的旋转，就可以使用rotate3d()，其基本语法格式如下。rotate3d()032.3D变形rotate3d(x,y,z,angle);例如，设置元素围绕x轴和y轴均旋转45°，示例代码如下。transform:rotate3d(1,1,0,45deg);知识引入perspective属性042.3D变形perspective属性可以简单地理解为观察者与3D场景的视距，该属性需要设置给3D变形元素的父元素，主要用于呈现良好的3D透视效果。perspective属性呈现的透视效果由属性值决定，属性值越小，透视效果越突出。perspective属性包括两个属性值：none和具有单位（一般为px）的数值。知识引入perspective属性042.3D变形下面通过一个透视旋转的案例，演示perspective属性的使用方法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>perspective属性</title>知识引入perspective属性042.3D变形<style>div{width:250px;height:50px;border:1pxsolid#666;margin:0auto;}知识引入perspective属性042.3D变形.div1{perspective:250px;}.div2{background-color:#0CC;}.div2:hover{transition:all1sease2s;transform:rotateX(60deg);}</style></head>知识引入perspective属性042.3D变形<body><divclass="div1"><divclass="div2">元素透视</div></div></body></html>知识引入perspective属性042.3D变形运行例example11.html，当鼠标指针悬停在小<div>上时，小<div>将围绕x轴旋转，并出现透视效果，如图。知识引入perspective属性042.3D变形在开发3D变形效果时，还会经常用到其他相关属性，如表。属性描述属性值transform-style

规定子元素如何在3D空间中显示

flat：子元素将不保留其3D位置preserve-3d：子元素将保留其3D位置backface-visibility

定义元素背面是否可见visible：背面是可见的hidden：背面是不可见的知识引入perspective属性042.3D变形除了前面提到的旋转，3D变形还包括位移和缩放等，运用3D变形方法可以实现不同的3D变形效果，具体如表。方法描述translate3d(x,y,z)定义3D位移（即元素在3D空间的位移）translateX(x)定义3D位移，仅沿x轴位移translateY(y)定义3D位移，仅沿y轴位移translateZ(z)定义3D位移，仅沿z轴位移知识引入perspective属性042.3D变形方法描述scale3d(x,y,z)定义3D缩放（即元素在3D空间的缩放）scaleX(x)定义3D缩放，仅沿x轴方向缩放scaleY(y)定义3D缩放，仅沿y轴方向缩放scaleZ(z)定义3D缩放，仅沿z轴方向缩放知识引入perspective属性042.3D变形下面通过代码演示3D变形属性和方法的使用，如例example12.html。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>3D变形属性和方法</title>知识引入perspective属性042.3D变形<style>div{width:200px;height:200px;border:2pxsolid#000;position:relative;transition:all1sease0s;

transform-style:preserve-3d;

}设置过渡效果规定子元素如何在3D空间中显示知识引入perspective属性042.3D变形img{position:absolute;top:0;left:0;transform:translateZ(100px);}.no2{transform:rotateX(90deg)translateZ(100px);}知识引入perspective属性042.3D变形div:hover{transform:rotateX(-90deg);}</style></head>设置围绕x轴旋转知识引入perspective属性042.3D变形<body><div><imgclass="no1"src="images/1.png"alt="1"><imgclass="no2"src="images/2.png"alt="2"></div></body></html>知识引入perspective属性042.3D变形运行示例代码，效果如图。项目实现掌握变形属性，能够运用变形属性制作一个翻牌动画。学习目标项目实现太阳笑脸案例8-4案例描述过渡和变形只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制，例如过渡和变形实现的动态效果不能够重复播放。为了实现更加丰富的动画效果，CSS3提供了animation属性，使用animation属性可以定义复杂的动画效果。本案例将运用@keyframes规则和animation属性制作太阳笑脸，效果如图。知识引入掌握@keyframes规则，能够熟练制作网页中常见的动画效果。学习目标1.@keyframes规则知识引入@keyframes规则用于创建动画，animation属性只有配合@keyframes规则才能实现动画，因此在学习animation属性之前，首先要学习@keyframes规则。@keyframes规则的语法格式如下：1.@keyframes规则@keyframeskeyframename{keyframes-selector{css-styles;}}表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空关键帧选择器，即指定当前关键帧在整个动画中的位置，值可以是一个百分比数值、from或者to定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空知识引入例如，使用@keyframes规则可以定义一个淡入动画，示例代码如下。1.@keyframes规则@keyframesappear{0%{opacity:0;}100%{opacity:1;}}动画开始时的状态，完全透明动画结束时的状态，完全不透明上述代码创建了一个名为appear的动画，动画开始时，opacity为0（完全透明）；动画结束时，opacity为1（完全不透明）。该动画还可以使用等效代码来实现，具体如下。@keyframesappear{from{opacity:0;}to{opacity:1;}}动画开始时的状态，完全透明动画结束时的状态，完全不透明知识引入如果需要创建一个淡入淡出的动画，可以通过如下代码实现。1.@keyframes规则@keyframesappear{from,to{opacity:0;}20%,80%{opacity:1;}}动画开始和结束时的状态，完全透明动画的中间状态，完全不透明知识引入注意：IE9.0以及更早版本的浏览器不支持@keyframes规则或animation属性。1.@keyframes规则知识引入掌握animation-name属性，能够熟练制作网页中常见的动画效果。学习目标2.animation-name属性知识引入animation-name属性用于定义要应用的动画名称，该动画名称会被@keyframes规则引用，其基本语法格式如下：2.animation-name属性animation-name:keyframename;初始值为none，适用于所有块元素和行内元素用于规定需要绑定到@keyframes规则的动画名称，如果值为none，则表示不应用任何动画知识引入掌握animation-duration属性，能够熟练制作网页中常见的动画效果。学习目标3.animation-duration属性知识引入animation-duration属性用于定义完成整个动画效果所需要的时间，其基本语法格式如下：animation-duration:time;初始值为0time是以秒或者毫秒为单位的时间3.animation-duration属性知识引入下面通过代码演示animation-name和animation-duration属性的用法，如例example13.html：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>animation-name和animation-duration属性</title>3.animation-duration属性知识引入<style>img{width:200px;animation-name:mymove;

animation-duration:10s;

}3.animation-duration属性定义动画名称定义动画时间知识引入@keyframesmymove{from{transform:translate(0)rotateY(180deg);}50%{transform:translate(1000px)rotateY(180deg);}51%{transform:translate(1000px)rotateY(0deg);}to{transform:translate(0)rotateY(0deg);}}</style></head><body><imgsrc="images/monkey.gif"></body></html>3.animation-duration属性知识引入运行示例代码，效果如图：3.animation-duration属性知识引入掌握animation-timing-function属性，能够熟练制作网页中常见的动画效果。学习目标4.animation-timing-function属性知识引入animation-timing-function属性用来规定动画的速度曲线，控制动画在播放过程中的速度变化方式。animation-timing-function属性的语法格式如下：animation-timing-function:value;默认属性值为ease4.animation-timing-function属性知识引入animation-timing-function属性还包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值，具体如表4.animation-timing-function属性属性值描述linear动画从头到尾的速度是相同的ease默认属性值，动画以慢速开始，然后加快，在结束前变慢ease-in动画以慢速开始ease-out动画以慢速结束ease-in-out动画以慢速开始和结束cubic-bezier(n,n,n,n)定义用于控制速度的贝塞尔曲线的形状，n一般是0～1的数值知识引入例如想让元素匀速运动，可以为元素添加以下示例代码：animation-timing-function:linear;4.animation-timing-function属性知识引入掌握animation-delay属性，能够熟练制作网页中常见的动画效果。学习目标5.animation-delay属性知识引入animation-delay属性用于定义动画延迟时间，即规定动画从什么时候开始，其基本语法格式如下：animation-delay:time;用于所有的块元素和行内元素5.animation-delay属性用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0知识引入例如，让添加动画的元素在2秒后播放动画，可以为该元素添加如下代码：animation-delay:2s;5.animation-delay属性动画开始前将会延迟2秒，然后才开始执行知识引入掌握animation-iteration-count属性，能够熟练制作网页中常见的动画效果。学习目标6.animation-iteration-co

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论