HTML5+CSS3 Web前端开发项目化教程 课件 项目7 动画页面制作

《HTML5+CSS3Web前端开发项目化教程》

项目7动画页面制作任务7.3制作“科普世界”模块03目录Contents任务7.2制作“漫游科技馆”模块02任务7.1制作“中国梦”主页头部轮播动画模块01任务7.4制作页脚模块04教学目标掌握transition过渡属性掌握transform变形属性掌握animation动画属性熟悉iconfont图标库的使用方法1.知识目标能够为元素设置过渡效果

能够为元素设置变形效果

能够创建并使用动画

能够在页面中使用iconfont图标2.技能目标树立科技强国意识

培养精益求精、力求创新的精神

遵守代码规范性要求，养成良好的代码编写习惯3.素养目标1任务7.1制作“中国梦”主页头部轮播动画模块效果展示animation-duration：动画完成时间2animation-timing-function：速度曲线3animation-name：动画名称1animation-iteration-count：动画播放次数5animation-direction：动画方向6animation-delay：延迟时间4animation：综合设置动画7知识储备-animation属性@keyframesanimationname{keyframes-selector{css-styles;}}

当前动画的名称

关键帧选择器，指定当前关键帧要应用到整个动画过程中的位置，百分比，from或to

定义执行到当前关键帧时对应的动画状态，CSS样式属性定义知识储备-animation属性1.@keyframes创建动画@keyframes规则用于创建动画，animation属性只有配合@keyframes规则才能实现动画效果。@keyframes规则

当前动画的名称定义执行到当前关键帧时对应的动画状态

关键帧选择器知识储备-animation属性1.@keyframes规则知识储备-animation属性2.animation属性animation-name属性用于定义使用@keyframes定义的动画的名称。1.animation-nameanimation-name:keyframename|none;知识储备-animation属性2.animation属性animation-duration属性用于定义整个动画效果完成所需要的时间。time常用单位为秒（s）或毫秒（ms）。2.animation-durationanimation-duration:time;知识储备-animation属性2.animation属性animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。3.animation-timing-functionanimation-timing-function:value;属性值描述linear表示过渡过程均匀变化。ease默认值。初始速度同linear一致，然后加快，最后慢慢结束。ease-in表示以慢速开始，然后逐渐加快（淡入效果）ease-out表示以快速开始，然后逐渐减速（淡出效果）ease-in-out表示以慢速开始、中间加快、结束前减速cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。取值范围一般是从0到1的数值。知识储备-animation属性2.animation属性animation-delay属性用于定义执行动画效果之前延迟的时间，也就是规定动画什么时候开始。4.animation-delayanimation-delay:time;

定义动画开始前延迟的时间知识储备-animation属性2.animation属性animation-iteration-count属性用于定义动画的播放次数。5.animation-iteration-countanimation-iteration-count:number|infinite;

播放动画的次数

指定动画循环播放知识储备-animation属性2.animation属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。6.animation-directionanimation-direction:normal|reverse|alternate|alternative-reverse;

动画正常播放alternate属性值会使动画在奇数次数（1、3、5等）正常播放，而在偶数次数（2、4、6等）逆向播放

反方向播放动画

奇数次逆向播放，偶数次正向播放知识储备-animation属性2.animation属性animation属性是一个复合属性，用于在一个属性中综合设置以上六个属性。使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，动画永远不会播放。7.animationanimation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;知识储备-animation属性2.animation属性实例解析animation属性的用法动画效果鼠标放到box上时，小球延迟1s无限次的匀速来回运动，持续时间为3s。animation-name:slide;/*动画名称为slide*/animation-duration:3s;/*动画持续时间为3s*/animation-timing-function:linear;/*速度曲线为linear*/animation-delay:1s;/*动画延迟时间为1s*/animation-iteration-count:infinite;/*循环播放*/animation-direction:alternate;/*奇数正向播放、偶数逆向播放*/animation:slide2slinear1sinfinitealternate;设置哪些属性？1.创建动画知识储备1.用@keyframes创建动画@keyframes：创建动画animation-name

：动画名称animation-duration

：动画完成时间animation-timing-function

：速度曲线animation-delay：延迟时间animation-iteration-count：动画播放次数animation-direction：动画方向animation：复合属性总结任务分析<header>div.topdiv.bottom<footer>任务实施任务实施2任务7.2制作“漫游科技馆”模块效果展示知识储备可以使元素从一种样式转变为另一种样式时看起来比较平滑，例如渐显、渐隐等。为什么使用过渡？transition属性知识储备transition-duration属性：持续时间2transition-timing-function属性：速度曲线3transition-property属性：过渡属性1transition属性5transition-delay属性：延迟时间4transition属性知识储备transition属性transition-property属性是设置应用过渡的CSS属性，例如，宽度属性、背景属性等。1.transition-propertytransition-property:none|all|property;示例：transition-property：color；

没有任何CSS属性有过渡效果

所有CSS属性都有过渡效果

应用过渡效果的CSS属性名称知识储备transition属性transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）2.transition-durationtransition-duration:time;示例：transition-duration：2s；知识储备transition属性transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。3.transition-timing-functiontransition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);知识储备transition属性属性值描述linear指定以相同速度开始至结束的过渡效果。ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果ease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果ease-out指定以慢速结束（淡出效果）的过渡效果。ease-in-out指定以慢速开始和结束的过渡效果。cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。transition-timing-function属性的取值transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。3.transition-timing-function知识储备transition属性transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。4.transition-property基本语法格式transition-delay:time;正数:过渡动作会延迟触发。负数：过渡动作会从该时间点开始，之前的动作被截断。示例：transition-delay：1s；知识储备transition属性transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。5.transition基本语法格式transition：propertydurationtiming-functiondelay;使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。例如：transition:border-radius5sease-in-out2s;知识储备transition属性使用过渡需要满足以下两个条件：元素必须具有状态变化；必须为每个状态设置不同的样式-样式变化。知识储备transition属性实例解析transition属性的用法动画效果动画效果为鼠标指针放到div上延迟1s后，div形状和颜色在2s内逐渐变化，过渡效果为以慢速开始，然后逐渐加快。transition-property：形状、颜色；transition-duration：2s；transition-timing-function：ease-in；transition-delay：1s；transition:all2sease-in1s;设置哪些属性？状态变化？知识导图任务分析任务7.2制作“中国梦”页面——漫游科技馆模块鼠标放到a上时，div.cur逐渐显示，怎么实现？可以调整div.cur的位置，刚开始在左侧隐藏，鼠标放到a上时，div.cur位置正常，并使用过渡逐渐显示div.bottomdiv.cura>img<h3><span><h2>任务实施任务实施3任务7.3制作“科普世界”模块效果展示任务7.3制作“科普世界”模块知识储备在CSS3之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript才能完成。CSS3出现后，通过transform属性就可以实现变形效果，包括元素的缩放、旋转、移动、倾斜等变形效果。平移缩放旋转倾斜CSS3的变形（transform）属性可以让元素在一个坐标系统中变形。基本语法格式transform：none|transform-functions;知识储备transform属性

默认值，表示不进行变形

变形函数，可以是一个或多个变形函数列表知识储备transform属性在CSS3中，使用scale()可以实现元素缩放效果。该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。缩放transform:scale(x,y);x、y分别指元素宽度和高度的缩放倍数。x、y可以是整数、负数和小数，取值绝对值大于1表示放大元素，取值绝对值小于1表示缩小元素，取值为负数表示反转元素。如果y值省略，则高度和宽度的缩放倍数相同知识储备transform属性在CSS3中，使用rotate()可以旋转指定的元素对象。旋转transform:rotate(angle);参数angle表示旋转的角度，角度单位为deg。角度为正时，按照顺时针方向旋转；角度为负时，按照逆时针方向旋转。知识储备transform属性平移是指元素位置的变化，包括水平移动和垂直移动。在CSS3中，使用translate()可以实现元素的平移效果。平移transform:translate(x,y);注意：x指元素在水平方向上移动的距离，y指元素在垂直方向上移动的距离。x、y值为带有长度单位标志符的数值，可以取0、正值和负值：若取值为正，则表示向右或向下移动；若取值为负，则表示向左或向上移动。知识储备transform属性在CSS3中，使用skew()可以实现元素倾斜效果。两个参数值分别用来定义X轴和Y轴坐标倾斜的角度。如果省略了第二个参数，则取默认值0。倾斜transform:skew(x-value,y-value);注意：参数x-angle和y-angle表示角度值，x-angle表示相对于X轴进行倾斜，y-angle表示相对于Y轴进行倾斜，如果省略了y-angle，则取默认值0。知识储备transform属性transform可以设置多个变形函数，多个函数之间用空格间隔。多种变形transform:rotate(30deg)scale(1.2)；示