css动画说课稿教案

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《css动画说课稿教案》，欢迎阅读！

说课稿

这节课的课题是《css动画》，我将从教材分析、学情分析、教法学法、教学过程和板书设计五个方面进行说 课。 一、说教材.教材分析

选用的教材是《网页设计与制作》，是一门软件技术专业必修课程，对提高学生的网页制作和后续h5的开发 有着重要的作用。因为随着互联网的开展，h5网页制作已经成为了主流，从历年的招聘信息中可以看出市场对 h5开发的需求不断增大。 1 .学情分析

由于本门课程是针对大一新生，学生们思维较活跃，对具体形象的页面比拟感兴趣，但大局部学生缺乏主动 性，自信心缺乏。 2 .教学目标

基于对课标要求、教材特点、学生实际等因素的综合考量，我整体考虑知识与能力、过程与方法、情感态度 与价值观三维目标的综合，尽可能靠近学生的“最近开展区”，制定以下教学目标： （1）指导学生团队协作（2）引导学生善于发现问题，主动学习

（3）激发学生学习热情。

3 .教学重难点

依据“课标”要求、教材内容、专业培养目标及高职学生的知识经验和认知水平，我将本课的 教学重点确定为：CSS动画的声明;难点为：CSS动画的参数。 二、说教法学法

科学合理地教学方法能使教学效果事半功倍，到达教与学地和谐统一。基于此，我准备采用情境教学法、设 疑问难法、点拨法、讲授法、案例分析等方法指导学生学习；

采用讲、演、练、评的方式。

上课到时候我先让学生观察网页效果，然后我来讲解实现步骤、演示完后，留出5〜10分钟让学生练习，我 在下面训班，帮学生指正。

三、说教学过程

接下来，具体说说教学过程。 （-）课前导入（5分钟）

为营造轻松和谐的课堂气氛，让学生愉快的学习，我打算先播放一段米老鼠的动画片。

大家先来观察一段视频，这是早期的动画，这个动画呢就有许张的图片快速播放而形成的，看上去像动画片, 这就是最早的帧动画。那么这种帧动画在网页中也非常常见，比方网页中的一些动态效果。那这些动态效果就是 由CSS动画实现的。

（二）讲解知识点刚才我们通过动画片知道了什么是帧动画，帧动画就是将多个效果用平缓的的效果串在一起。 接下来，咱们看下一如何实现css动画。CSS动画分为两步，第一步声明动画，第二步使用动画，声明动画呢， 通过关键字@keyframes空格动画名字。里面通过百分比的方式定义要实现的效果。比方0%什的时间你要定义 什么样


式，50%{}表示动画的时间走到一半时是什么样的。100%什那么第二步使用动画，首先通过css选择器找到要设置动画的标签，在选择器里面使用动画，通过关键字animate 属性使用，后面跟上动画的名字，动画的时长和曲线函数。

（三）小组交流，合作探究（10分钟）好的，通过刚才老师的讲解和演示，想必大家对css动画的使用有了初步的了解，那么大家就来完成一个练习吧。 这时，放手让学生在3-4人小组内交流自主学习成果，合作探究，完成课堂练习。这一环节，我会及时对薄弱小 组进行指导。 然后引入课程思政：团队协作、态度严谨。

［设计意图］为学生搭建这样的对话平台，是想让学生在交流与合作中增强职业意识，激发其内在学习动机。 （四）集体反应，点拨释疑（20分钟）随机指定某个小组一名代表上讲台演示实现过程。然后让学生观察操作的流程是否有问题，并给出建议。 （五）总结

进行课堂小结，我们本节课学习了后，布置作业。

（1） 操作练习。大家完成课后练习。css动画的使用，css的实现步骤分为两步。动画的声明和动画的实现。然

本文来源：https://www.wddqxz.cn/b1c5820de75c3b3567ec102de2bd960590c6d9a0.html