百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

No.1 - 制作一个简单的菜单动画效果

普通

人数1555人在学习该课程,有397人已经完成该课程

时间平均用时3.2

关键词csscss transition

课程概述

作业提交截止时间:09-01

关于此课程

此课程按照简单到难的顺序一共有八个任务,由浅入深的带大家了解 Web 动效落地方法 。完成这八道题,你会掌握如下技能:

  • 熟练掌握 CSS transition 、transform 、animation 的用法 ;
  • 怎么从一份动效标注 去 100% 还原 CSS 动画 ;
  • 学会使用常用的 前端动画开源库 。

课程适用人群

  • 你需要具备一定 HTML、CSS 开发基础;
  • 你对 动效设计概念 有一定的了解,既知道怎么做,也知道为什么要这么做;
  • 你需要具备熟练使用 git|github 的能力。

作者有话说

  • 在后续的一段时间,我会陆续在我的知乎专栏公布题目的写法和详细分析。https://zhuanlan.zhihu.com/uxelement
  • 建议你在看我的方法之前,尽量先自己先实现,我的方法不一定比你的好。也欢迎你在完成课程的闲暇,贡献自己的学习笔记。毕竟总结沉淀才是最好的学习方法。
  • 如果你对本课程有任何意见,或者你跟我一样是个爱猫人士的话,欢迎来我的知乎勾搭~我们可以聊聊技术(养猫)心得:)

下面进入本学院第一个任务

任务目的

  • 熟悉 CSS3 过渡子属性
  • 通过 JavaScript 触发过渡效果
  • 理解语义化,合理地使用 HTML 标签来构建页面

任务描述

  • 通过 CSS transition 实现如下效果:
    视频demo
  • 每次点击【切换样式】按钮的时候,出现视频 demo 所示的动画效果。
  • 学有余力的同学可以研究一下,如何通过修改贝塞尔曲线,让这个动效更贴近自然。

任务注意事项

  • CSS transition 的各项子属性(时间曲线)等详细值可以自由定义;
  • 注意浏览器中的兼容性;
  • HTML 及 CSS 代码结构清晰、规范;
  • 代码中含有必要的注释;

在线学习参考资料

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
CSS3过渡2018-04-24 18:35310534
动画效果2018-04-24 19:1539216
No.1制作一个简单的菜单动画效果2018-04-25 22:209613
点击查看更多课程优秀笔记