web前端技术应用 教案 项目三 任务二 美化网页其他区域_第1页
web前端技术应用 教案 项目三 任务二 美化网页其他区域_第2页
web前端技术应用 教案 项目三 任务二 美化网页其他区域_第3页
web前端技术应用 教案 项目三 任务二 美化网页其他区域_第4页
全文预览已结束

下载本文档

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

文档简介

课程名称：动画课题动画的制作班级教师课时2课时教学目标知识1.动画的概念2.如何声明和设置动画技能3.灵活的按照动画设置步骤设置动画素养培养学生主动观察，主动分析，敢于探索的能力教学重点根据情况声明动画，并且正确使用教学难点不同效果的动画的设置方式教学方法讲述法+实际操作教学环境机房

教学过程教学环节教师活动学生活动课程引入展示一个具有动画的网页让同学们欣赏，动画可以增加网页的趣味性。明确本堂课的任务要求：选择器的学习。展示学习目标用ppt展示本堂课的学习目标明确学习内容，有目标的学习讲解新课课堂导入：让我们来看看如实现动画，首先需要对动画效果进行声明，以此描述动画的具体效果。然后使用动画。1、声明动画提问：什么是动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。展示一组动画效果（将<div>元素的背景颜色从"red"逐渐改为"yellow"）以及代码。/*动画代码*/@keyframesexample{from{background-color:red;}to{background-color:yellow;}}/*向此元素应用动画效果*/div{width:100px;height:100px;background-color:red;animation-name:example;animation-duration:4s;您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是动画的开始，100%是动画的完成。动画的组成一组定义的动画关键帧描述该动画的CSS声明（3）动画关键帧@keyframes属性可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分丰富。基本语法格式如下：@keyframesanimationname{keyframes-selector{css-styles}}@keyframes规则中的animationname是当前动画的名称；keyframes-selector是关键帧选择器；css-styles当前关键帧的动画状态。（4）动画的声明animation属性用于描述动画的CSS声明，它是一个复合属性，包括指定具体动画以及动画时长等行为。基本语法格式：animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state说明：animation-name规定@keyframes动画的名称。animation-duration规定动画完成一个周期所花费时间。animation-timing-function规定动画的速度曲线，值如下：linear动画从头到尾的速度是相同的ease默认值。动画以低速开始，然后加快，在结束前变慢ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。可能的值是从0到1的数值animation-delay规定动画开始前的延迟，可选。animation-iteration-count规定动画被播放的次数animation-play-state规定动画是否正在运行或暂停animation-fill-mode规定对象动画时间之外的状态例：制作如下动画过程效果：步骤1<body><div></div></body>步骤2<head><style>div{width:100px;height:100px;background-color:red;animation-name:example;animation-duration:4s;}@keyframesexample{0%{background-color:red;}25%{background-color:yellow;}50%{background-color:blue;}100%{background-color:green;}}</style></head>认真做好笔记观看老师的操作，思考并且回答问题学生思考，教师在关键节点进行点拨启发。课堂练习让同学们根据所学知识制作一个简单动画，要求包括四种状态的转换。学生们先回忆所学选择器内容，分组讨论，共同完成。课堂评价1．教师下位去检查各个小组

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论