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

《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等）逆向播放