《网页设计制作》课件-项目7_第1页
《网页设计制作》课件-项目7_第2页
《网页设计制作》课件-项目7_第3页
《网页设计制作》课件-项目7_第4页
《网页设计制作》课件-项目7_第5页
已阅读5页，还剩54页未读， 继续免费阅读

下载本文档

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

文档简介

《网页设计制作》项目77.1音视频标签7.2CSS过渡7.3CSS变换7.4CSS动画目

录7.1音视频标签在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。复杂冗长运用HTML5中新增的video标签和audio标签可以避免这样的问题。运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。视频格式视频格式包含视频编码、音频编码和容器格式。音频格式音频格式是指要在计算机内播放或是处理音频文件。7.1音视频标签使用video嵌入视频基本语法格式：<videosrc="视频文件路径"controls="controls"></video><body><videosrc="video/pian.mp4"controls="controls">浏览器不支持video标签</video></body>例如：使用video标签来嵌入视频7.1音视频标签使用video嵌入视频浏览器添加的视频控件，用于控制视频播放的状态播放进度条声音全屏7.1音视频标签属性值描述autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。posterurl当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。Video元素的其他属性7.1音视频标签HTML5支持的视频格式oggmpeg4webm7.1音视频标签使用audio嵌入音频基本语法格式如下：<audiosrc="音频文件路径"controls="controls"></audio><body><audiosrc="music/1.mp3"controls="controls">浏览器不支持audio标签</audio></body>例如：使用audio标签来嵌入音频7.1音视频标签使用audio嵌入音频音频控件，用于控制音频文件的播放状态播放进度条声音7.1音视频标签audio元素的其他属性属性值描述autoplayautoplay当页面载入完成后自动播放音频。looploop音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。注意：以上列举的audio元素的属性和video元素是相同的，这些相同的属性在嵌入音视频时是通用的。7.1音视频标签HTML5支持的音频格式oggmp3wav7.1音视频标签视频音频文件的兼容性问题虽然html5支持ogg、mpeg4和webm的视频格式以及ogg、mp3和wav的音频格式，但各浏览器对这些格式却不完全支持。视频格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0ogg

×支持支持支持

×mpeg4支持

×

×支持支持webm

×支持支持支持

×音频格式ogg

×支持支持支持

×mp3支持

×

×支持支持wav

×支持支持

×支持7.1音视频标签在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。基本语法格式<audiocontrols="controls"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> ……</audio>src用于指定媒体文件的URL地址。type指定媒体文件的类型。浏览器对音视频文件的兼容性7.1音视频标签多学一招：调用网页多媒体文件一种是调用本地多媒体文件（见教材），另一种是调用指定url地址的互联网多媒体文件。例如：<videosrc="/i/movie.ogg"controls="controls">调用网络视频文件</video>【总结】7.1音视频标签控制视频的宽高在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。注意：通过width和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（如“格式工厂”）对视频进行压缩。7.1音视频标签7.1音视频标签7.2CSS过渡7.3CSS变换7.4CSS动画目

录7.2过渡什么是过渡？生活中处处可见的动画过渡到底是什么？认识过渡7.2过渡过渡效果可以让元素从一种状态慢慢转换到另一种状态，例如渐显、渐隐、动画的加快减慢等。知识点讲解transition-property属性transition-duration属性transition-timing-function属性transition-delay属性Transition属性7.2过渡transition-propertytransition-durationtransition-timing-functiontransition-delaytransition-durationtransition-timing-functiontransition-delay用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。transition-property:none|all|property;基本语法格式：transition-transition-7.2过渡transition-propertytransition-timing-functiontransition-delay用于定义完成过渡效果需要花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）transition-duration:时间;基本语法格式：transition-transition-duration7.2过渡transition-propertytransition-timing-functiontransition-durationtransition-delay规定过渡效果中速度的变化，例如，先慢速后快速、先快速后慢速等速度变化效果。transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);基本语法格式：transition-7.2过渡transition-propertytransition-delaytransition-durationtransition-timing-function规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay:time;基本语法格式：transition-transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。7.2过渡transition-propertytransition-durationtransition-timing-functiontransition-delay

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。transition：propertydurationtiming-functiondelay;基本语法格式：transition-注意：在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。7.2过渡无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。7.2过渡7.1音视频标签7.2CSS过渡7.3CSS变换7.4CSS动画目

录认识变形在网页设计中，变形效果可以让元素实现位置、形状的变化，例如移动、倾斜、缩放以及翻转等效果。想要实现变形效果，就需要为元素设置变形属性，通过CSS3中transform属性就可以实现变形效果。知识点讲解2D变形3D变形7.3变形2D变形2D变形也称为平面变形，是指在视觉平面内的变化。即元素在X轴和Y轴的变化知识点讲解平移缩放倾斜旋转7.3变形平移缩放倾斜旋转缩放倾斜旋转平移是指元素位置的变化。在CSS3中，使用translate()可以实现平移效果transform:translate(x-value,y-value);基本语法格式：元素在水平方向上移动的距离元素在垂直方向上移动的距离注意：如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。7.3变形在使用translate()方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行移动。7.3变形平移前平移后平移缩放倾斜旋转在CSS3中，使用scale()可以实现元素缩放效果transform:scale(x-axis,y-axis);基本语法格式：注意：如果第二个参数省略，则第二个参数等于第一个参数值。x-axis和y-axis参数值可以是正数、负数和小数放大前的元素放大后的元素7.3变形平移缩放倾斜旋转在CSS3中，使用skew()可以实现元素倾斜效果transform:skew(x-angle,y-angle);基本语法格式：注意：如果省略了第二个参数，则取默认值0。相对于X轴进行倾斜相对于Y轴进行倾斜倾斜前的元素倾斜后的元素7.3变形平移缩放倾斜旋转在CSS3中，使用rotate()可以旋转指定的元素对象transform:rotate(angle);基本语法格式：如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转表示要旋转的角度值旋转后的元素旋转前的元素7.3变形更改变换的基点基点就是元素的中心点，或者是元素X轴和Y轴的50%位置处。知识点讲解使用transform-origin属性改变元素的中心点transform-origin:x-axisy-axisz-axis;基本语法格式：定义视图被置于X轴的何处属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。默认值是50%。定义视图被置于Y轴的何处属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。默认值是50%。定义视图被置于Z轴的何处该值不能是一个百分比值，否则将会视为无效值，一般为像素单位。默认值是0px7.3变形3D变形3D变形是元素围绕X轴、Y轴、Z轴的变化。知识点讲解围绕X轴旋转围绕Y轴旋转3D旋转7.3变形围绕X轴旋转围绕Y轴旋转3D旋转围绕Y轴旋转3D旋转rotateX()可以让指定元素围绕X轴旋转transform:rotateX(a);基本语法格式：参数a用于定义旋转的角度值，单位为deg，取值可以是正数也可以是负数。注意：如果值为正，元素将围绕X轴顺时针旋转；如果值为负，元素围绕X轴逆时针旋转。7.3变形围绕X轴旋转围绕Y轴旋转3D旋转rotateY()可以让指定元素围绕Y轴旋转transform:rotateY(a);基本语法格式：如果值为正，元素围绕Y轴顺时针旋转；如果值为负，元素围绕Y轴逆时针旋转。参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。7.3变形rotated3d()是rotateX()、rotateY()和rotateZ()演变的综合属性，用于设置多个轴的3D旋转rotate3d(x,y,z,angle);基本语法格式：x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0为要旋转的角度围绕X轴旋转3D旋转围绕Y轴旋转7.3变形rotateZ()函数和rotateX()函数、rotateY()函数功能一样，区别在于rotateZ()函数用于指定一个元素围绕Z轴旋转。如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，与rotate()效果等同，但rotateZ不是在2D平面上的旋转。7.3变形perspective属性perspective属性主要用于呈现良好的3D透视效果,Perspective属性的透视效应由属性值来决定，属性值越小，透视效果越突出。知识点讲解none具有单位的数值7.3变形其他转换属性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轴的值7.3变形其他转换属性属性名称描述属性值transform-style规定被嵌套元素如何在3D空间中显示flat：子元素将不保留其3D位置。preserve-3d子元素将保留其3D位置。backface-visibility定义元素在不面对屏幕时是否可见visible：背面是可见的。Hidden：背面是不可见的。在CSS3中还包含很多转换的属性，通过这些属性可以设置不同的转换效果7.3变形7.1音视频标签7.2CSS过渡7.3CSS变换7.4CSS动画目

录认识动画由于在CSS3中，过渡效果只能定义元素过程动画，并不能对过程中的某一环节进行控制。一些属性可以实现更加丰富的动画效果知识点讲解animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation7.4动画7.4动画@keyframes规则animation属性只有配合@keyframes规则才能实现动画效果，因此在学习animation属性之前，我们首先要学习@keyframes规则知识点讲解@keyframesanimationname{ keyframes-selector{css-styles;}}基本语法格式：7.4动画animationnamekeyframes-selectorcss-styleskeyframes-selectorcss-styles表示当前动画的名称。它将作为引用时的唯一标识，因此不能为空。7.4动画css-styles关键帧选择器。即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。animationnamekeyframes-selectorcss-styles7.4动画定义执行到当前关键帧时对应的动画状态。由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。animationnamecss-styleskeyframes-selectorInternetExplorer9，以及更早的版本，不支持@keyframe

规则或animation属性。InternetExplorer10、Firefox以及Opera支持@keyframes

规则和animation属性。7.4动画7.4动画animation-name属性animation-name属性用于定义要应用的动画名称，为@keyframes动画规定名称。知识点讲解animation-name:keyframename| ;基本语法格式：none适用于所有块内元素keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画。7.4动画animation-duration属性animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。知识点讲解animation-duration:time;基本语法格式：animation-duration属性初始值为0。time参数是以秒（s）或者毫秒（ms）为单位的时间。当设置为0时，表示没有任何动画效果。当值为负数时，会被视为0。7.4动画animation-timing-function属性animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画速率。知识点讲解animation-timing-function:value;基本语法格式：animation-timing-function的默认属性值为ease7.4动画animation-timing-function属性属性值描述linear动画从头到尾的速度是相同的。ease默认属性值。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。可能的值是从0到1的数值。animation-timing-function的常用属性：7.4动画animation-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

提交评论