网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第8章 全新的网页视听技术_第1页
网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第8章 全新的网页视听技术_第2页
网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第8章 全新的网页视听技术_第3页
网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第8章 全新的网页视听技术_第4页
网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第8章 全新的网页视听技术_第5页
已阅读5页，还剩62页未读， 继续免费阅读

下载本文档

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

文档简介

第8章全新的网页视听技术《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》学习目标/Target掌握页面的音频和视频嵌入技术，能够描述HTML5中嵌入音频和视频的标签和

属性理解CSS3中的过渡属性，能够说出不同过渡属性的含义掌握CSS3中的变形属性，能够归纳2D变形和3D变形的效果掌握CSS3中的动画，能够归纳制作动画的常用属性学习目标/Target掌握<video>标签和<audio>标签的使用方法，能够在网页中定义视频和音频掌握过渡属性的使用方法，能够实现元素的平滑过渡效果掌握变形属性的使用方法，能够实现元素的平移、缩放、倾斜和旋转等效果掌握动画属性的使用方法，能够实现丰富的动画效果章节概述/Summary在网络飞速发展的今天，互动、互联、互通的网页多媒体新生态正在形成。声音、视频、动画已经被越来越广泛地应用在网页设计中。比起静态的图片和文字，音频、视频、动画可以为用户提供更直观、丰富的信息，为浏览者带来全新的感受。本章将对网页中的音频、视频、动画等视听技术进行详细讲解。目录/Contents8.18.2音频、视频嵌入技术过渡8.3变形目录/Contents8.48.5动画阶段案例：制作音乐播放界面8.6动手实践：实现风车转动效果音频、视频嵌入技术8.18.1.1传统音频、视频嵌入方式在HTML5出现之前并没有将视频和音频嵌入页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。复杂冗长运用HTML5中新增的<video>标签和<audio>标签可以避免这样的问题。8.1.2使用<video>嵌入视频运用HTML5的<video>和<audio>标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。视频格式视频格式包含视频编码、音频编码和容器格式。音频格式音频格式是指要在计算机内播放或是处理音频文件。8.1.2使用<video>嵌入视频使用<video>嵌入视频基本语法格式：<videosrc="视频文件路径"controls="controls"></video><body><videosrc="video/pian.mp4"controls="controls">浏览器不支持video标签</video></body>例如：使用<video>标签来嵌入视频8.1.2使用<video>嵌入视频浏览器添加的视频控件，用于控制视频播放的状态8.1.2使用<video>嵌入视频属性值描述autoplayautoplay当页面载入完成后自动播放视频。视频只有设置为静音时才能自动播放looploop视频结束时重新开始播放preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性posterurl当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来mutedmuted设置视频静音8.1.2使用<video>嵌入视频HTML5支持的视频格式OggMPEG4WebM8.1.3使用<audio>嵌入音频使用<audio>嵌入音频基本语法格式如下：<audiosrc="音频文件路径"controls="controls"></audio><body><audiosrc="music/1.mp3"controls="controls">浏览器不支持audio标签</audio></body>例如：使用<audio>标签嵌入音频8.1.3使用<audio>嵌入音频音频控件，用于控制音频文件的播放状态8.1.3使用<audio>嵌入音频属性值描述autoplayautoplay当页面载入完成后自动播放音频looploop音频结束时重新开始播放preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性注意：以上列举的audio元素的属性和video元素是相同的，这些相同的属性在嵌入音视频时是通用的。8.1.3使用<audio>嵌入音频HTML5支持的音频格式OGGMP3WAV8.1.4浏览器对音视频文件的兼容性虽然HTML5支持OGG、MPEG4和WebM的视频格式以及OggVorbis、MP3和WAV的音频格式，但各浏览器对这些格式却不完全支持。8.1.4浏览器对音视频文件的兼容性在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。基本语法格式<audiocontrols="controls"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> ……</audio>src用于指定媒体文件的URL地址type指定媒体文件的类型8.1.4浏览器对音视频文件的兼容性多学一招：调用网页多媒体文件一种是调用本地多媒体文件，另一种是调用指定URL地址的互联网多媒体文件。例如：<videosrc="音乐文件所在的网络路径"controls="controls">调用网络音频文件</video>8.1.5控制视频的宽高在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。注意：通过width和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此需要运用相关软件对视频进行压缩。过渡8.28.2过渡什么是过渡？8.2过渡生活中处处可见的过渡过渡到底是什么？8.2过渡过渡效果可以让元素从一种状态慢慢转换到另一种状态，如渐显、渐隐、动画的加快减慢等。知识点讲解transition-property属性transition-duration属性transition-timing-function属性transition-delay属性transition属性8.2.1transition-property属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。transition-property:none|all|property;基本语法格式：transition-propertytransition-timing-functiontransition-delaytransitiontransition-duration8.2.2transition-duration属性用于定义完成过渡效果需要花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）transition-duration:时间;基本语法格式：transition-propertytransition-timing-functiontransition-delaytransitiontransition-duration8.2.3transition-timing-function属性规定过渡效果中速度的变化，例如，先慢速后快速、先快速后慢速等速度变化效果。transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);基本语法格式：transition-propertytransition-timing-functiontransition-delaytransitiontransition-duration8.2.4transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay:time;基本语法格式：transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。transition-propertytransition-delaytransitiontransition-durationtransition-timing-function8.2.5transition属性

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。transition：propertydurationtiming-functiondelay;基本语法格式：注意：在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。transition-propertytransition-delaytransitiontransition-durationtransition-timing-function8.2.5transition属性无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。变形8.38.3.12D变形在网页设计中，变形效果可以让元素实现位置、形状的变化，如移动、倾斜、缩放及翻转等效果。想要实现变形效果，就需要为元素设置变形属性，通过CSS3中transform属性就可以实现变形效果。知识点讲解2D变形3D变形8.3.12D变形2D变形也称为平面变形，是指在视觉平面内的变化。知识点讲解平移缩放倾斜旋转8.3.12D变形平移是指元素位置的变化。在CSS3中，使用translate()可以实现平移效果transform:translate(x-value,y-value);基本语法格式：元素在水平方向上移动的距离元素在垂直方向上移动的距离注意：如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。平移缩放倾斜旋转8.3.12D变形在使用translate()方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行移动。平移前平移后平移缩放倾斜旋转8.3.12D变形在CSS3中，使用scale()可以实现元素缩放效果transform:scale(x-axis,y-axis);基本语法格式：注意：如果第二个参数省略，则第二个参数等于第一个参数值。x-axis和y-axis参数值可以是正数、负数和小数放大前的元素放大后的元素平移缩放倾斜旋转8.3.12D变形在CSS3中，使用skew()可以实现元素倾斜效果transform:skew(x-angle,y-angle);基本语法格式：注意：如果省略了第二个参数，则取默认值0。相对于X轴进行倾斜相对于Y轴进行倾斜倾斜前的元素倾斜后的元素平移缩放倾斜旋转8.3.12D变形在CSS3中，使用rotate()可以旋转指定的元素对象transform:rotate(angle);基本语法格式：如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转要旋转的角度值旋转后的元素旋转前的元素平移缩放倾斜旋转8.3.12D变形基点就是元素的中心点，或者是元素X轴和Y轴的50%位置处。知识点讲解使用transform-origin属性改变元素的中心点transform-origin:x-axisy-axisz-axis;基本语法格式：定义视图被置于X轴的何处定义视图被置于Y轴的何处定义视图被置于Z轴的何处更换变换的基点8.3.12D变形基点就是元素的中心点，或者是元素X轴和Y轴的50%位置处。知识点讲解更换变换的基点参数描述x-axis定义视图被至于X轴的何处。属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词y-axis定义视图被至于Y轴的何处。属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词z-axis定义视图被至于Z轴的何处。需要注意的是，该值不能是一个百分比值，否则将会视为无效值，一般为像素单位8.3.23D变形3D变形是元素围绕X轴、Y轴、Z轴的变化。知识点讲解围绕X轴旋转围绕Y轴旋转3D旋转8.3.23D变形rotateX()可以让指定元素围绕X轴旋转transform:rotateX(a);基本语法格式：参数a用于定义旋转的角度值，单位为deg，取值可以是正数也可以是负数注意：如果值为正，元素将围绕X轴顺时针旋转；如果值为负，元素围绕X轴逆时针旋转。围绕X轴旋转围绕Y轴旋转3D旋转8.3.23D变形围绕X轴旋转围绕Y轴旋转3D旋转rotateY()可以让指定元素围绕Y轴旋转transform:rotateY(a);基本语法格式：如果值为正，元素围绕Y轴顺时针旋转；如果值为负，元素围绕Y轴逆时针旋转。参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。8.3.23D变形rotated3d()是rotateX()、rotateY()和rotateZ()演变的综合属性，用于设置多个轴的3D旋转rotate3d(x,y,z,angle);基本语法格式：x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0要旋转的角度围绕X轴旋转围绕Y轴旋转3D旋转8.3.23D变形rotateZ()函数和rotateX()函数、rotateY()函数功能一样，区别在于rotateZ()函数用于指定一个元素围绕Z轴旋转。如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，与rotate()效果等同，但rotateZ()不是在2D平面上的旋转。8.3.23D变形perspective属性主要用于呈现良好的3D透视效果。perspective属性的透视效果由属性值来决定，属性值越小，透视效果越突出。知识点讲解none具有单位的数值8.3.23D变形属性名称描述属性值transform-style规定被嵌套元素如何在3D空间中显示flat：子元素将不保留其3D位置preserve-3d：子元素将保留其3D位置backface-visibility定义元素在不面对屏幕时是否可见visible：背面是可见的hidden：背面是不可见的在CSS3中还包含很多转换的属性，通过这些属性可以设置不同的转换效果8.3.23D变形3D变形还包括移动和缩放，运用这些方法可以实现不同的转换效果方法名称描述translate3d(x,y,z)定义3D位移translateX(x)定义3D位移，给定X轴的值translateY(y)定义3D位移，给定Y轴的值translateZ(z)定义3D位移，给定Z轴的值scale3d(x,y,z)定义3D缩放scaleX(x)定义3D缩放，给定X轴的值scaleY(y)定义3D缩放，给定Y轴的值scaleZ(z)定义3D缩放，给定Z轴的值动画8.48.4动画在CSS3中，过渡效果只能定义元素过程动画，并不能对过程中的某一环节进行控制。为了实现更加丰富的动画效果，CSS3提供了一些属性。知识点讲解animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation8.4.1@keyframesanimation属性只有配合@keyframes规则才能实现动画效果，因此在学习animation属性之前，首先要学习@keyframes规则。知识点讲解@keyframesanimationname{ keyframes-selector{css-styles;}}基本语法格式：8.4.1@keyframesanimationnamekeyframes-selectorcss-styles表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。8.4.1@keyframes关键帧选择器。即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。animationnamekeyframes-selectorcss-styles8.4.1@keyframes定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。animationnamekeyframes-selectorcss-styles8.4.2animation-name属性animation-name属性用于定义要应用的动画名称，为@keyframes动画规定名称。知识点讲解animation-name:keyframename| ;基本语法格式：nonekeyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none则表示不应用任何动画。8.4.3animation-duration属性animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。知识点讲解animation-duration:time;基本语法格式：animation-duration属性初始值为0。time参数是以秒（s）或者毫秒（ms）为单位的时间。当设置为0时，表示没有任何动画效果。当值为负数时，会被视为0。8.4.4animation-timing-function属性animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画速率。知识点讲解animation-timing-function:value;基本语法格式：animation-timing-function的默认属性值为ease。8.4.4animation-timing-function属性属性值描述linear动画从头到尾的速度是相同的ease默认属性值。动画以低速开始，然后加快，在结束前变慢ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束cubic-bezier(n,n,n,n)在cubic-bezier()函数中指定的值。可能的值是从0到1的数值animation-timing-function的常用属性值：8.4.5animation-delay属性animation-delay属性用于定义执行动画效果延迟的时间，也就是规定动画什么时候开始。知识点讲解animation-delay:time;基本语法格式：参数time用于定义动画开始前等待的时间，其单

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

温馨提示

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

最新文档

评论

0/150

提交评论