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

No.7 - 使用 animate.css 实现一个优雅的登录框

困难

人数174人在学习该课程,有119人已经完成该课程

时间平均用时0.6

课程概述

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

任务目的

  • 深度理解掌握 transition-timing-function 以及它的意义
  • 配合 CSS transform 和 CSS transition 制作交互动效
  • 通过 jQuery 判断并控制动画的触发条件
  • 接触并使用 animate.css 开源库

任务描述

  • 观看视频 demo 中的交互动效
  • 视频demo
  • 在我们提供给你的 HTML 文件基础上,适当的添加 CSS transition 和 CSS transform 属性,实现视频 demo 中的效果
    下载.html 文件

要求:

  • 通过 jQuery 判断输入框是否有内容,如果 Email 和 Password 都填充了内容,为 Submit 按钮添加动画让它变得引人注目
  • 当 输入框 出于 focus 状态的时候,Label 要变小并退到上面去
  • 研究一下为自己的 transition 添加什么样的 transition-timing-function 会让效果更流畅
  • 要求使用动画开源库 :https://daneden.github.io/animate.css/ 制作按钮的动画

任务注意事项

  • 注意各项属性在不同浏览器中的兼容性
  • 请注意代码风格的整齐、优雅
  • HTML 及 CSS 代码结构清晰、规范
  • 代码中含有必要的注释

在线学习参考资料

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~