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

绿

百度内容生态运营部前端工程师,任职于 ECharts 团队。喜欢探索新奇好玩的技术,更喜欢与你分享交流,用技术解决问题。

共发布 8个任务,已经有 3203名学生在这里学习上课
课程结束

难度:普通时间:大约需要1

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

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

关于此课程 此课程按照简单到难的顺序一共有八个任务,由浅入深的带大家了解 Web 动效落地方法 。完成这八道题,你会掌握如下技能: 熟练掌握 CSS transition 、transform 、animation 的用法 ; 怎么从一份动效标注 去 100% 还原 CSS 动画 ; 学会使用常用的 前端动画开源库 。 课程适用人群 你需要具备一定 HTML、CSS 开发基础; 你对 动效设计概念 有一定的了解,既知道怎么做,也知道为什么要这么做; 你需要具备熟练使用 git|github 的能力。 作者有话说 在后续的一段时间,我会陆续在我的知乎专栏公布题目的写法和详细分析。htt…

课程结束

难度:普通时间:大约需要1

411人在学习该课程,有269人已经完成该课程

No.2 - 初步接触 CSS 2D 变形

任务目的 熟悉 CSS transform 各项子属性 理解 CSS transform 2D 变形 任务描述 通过 CSS transform 实现如 设计图 中所示效果,要求达到对设计稿的百分百的还原。 下载设计图源文件 其中,你应当实现的变换效果已经在 Psd 中标明 任务注意事项 注意不同浏览器中的兼容性 请注意代码风格的整齐、优雅 HTML 及 CSS 代码结构清晰、规范 代码中含有必要的注释 在线学习参考资料 CSS3 新特性兼容方法总结 CSS3 2D 转换 CSS Transforms Module CSS3 中的变形 transform详解 …

课程结束

难度:进阶时间:大约需要3

273人在学习该课程,有219人已经完成该课程

No.3 - CSS transition 和 CSS transform 配合制作动画

任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transition 制作流畅动画 使用 CSS 伪元素触发过渡效果 合理的使用 CSS 布局 任务描述 在我们提供给你的 HTML 文件基础上,适当的添加 CSS transition 和 CSS transform 属性 ,实现视频 demo 中的效果; 鼠标 hover 上去的时候,出现小猫笑起来的动画;动画 demo下载.html 文件 transition 和transform 各项子属性的值可以自定 ; 对 CSS 布局比较感兴趣的同…

课程结束

难度:进阶时间:大约需要2

266人在学习该课程,有210人已经完成该课程

No.4 - 3D 空间的卡片翻转动效

任务目的 掌握 CSS transform 3D 变形 使用 CSS 伪元素触发过渡效果 熟悉 CSS transform 各项子属性 任务描述 根据 动效 demo 中的效果 、通过 CSS 实现一个卡片翻转的效果。 动效 demo 下载设计稿图片资源 任务注意事项 注意不同浏览器中的兼容性 请注意代码风格的整齐、优雅 HTML 及 CSS 代码结构清晰、规范 代码中含有必要的注释 在线学习参考资料 CSS3 新特性兼容方法总结 CSS3 3D transform 详解 CSS Transforms 3D CSS3 过渡 CSS3 变形 CSS Transf…

课程结束

难度:困难时间:大约需要3

213人在学习该课程,有162人已经完成该课程

No.5 - 纯 CSS 制作绕中轴旋转的立方体

任务目的 学习 CSS animation keyframes 理解动画中 关键帧 的概念 掌握 CSS transform 3D 变形 任务描述 观看视频中的效果 、通过纯CSS 实现一个立方体翻转的效果 视频demo 要求 hover 的时候, 立方体绕着「通过其中心的纵轴」旋转 任务注意事项 注意不同浏览器中的兼容性 请注意代码风格的整齐、优雅 HTML 及 CSS 代码结构清晰、规范 代码中含有必要的注释 在线学习参考资料 CSS3 新特性兼容方法总结 CodePen 立方体 demo CSS3 3D transform 详解 CSS Trans…

课程结束

难度:进阶时间:大约需要1

189人在学习该课程,有146人已经完成该课程

No.6 - 利用 CSS animation 制作一个炫酷的 Slider

任务目的 学习CSS animation keyframes 理解动画中 关键帧的概念 熟悉并掌握 CSS3 动画属性 任务描述 观看视频 demo ,通过 CSS animation 实现一个 全屏 Image Slider 的效果; 视频demo 主区域照片全屏显示,通过底部的缩略图来控制不同的图片切入画面 要求借助我们提供给你的动效标注、百分百还原该动效。下载动效标注任务注意事项 注意 CSS animation 属性在不同浏览器中的兼容性 请注意代码风格的整齐、优雅 HTML 及 CSS 代码结构清晰、规范 代码中含有必要的注释 在线学习参考资料 CSS3 a…

课程结束

难度:困难时间:大约需要3

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

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

任务目的 深度理解掌握 transition-timing-function 以及它的意义 配合 CSS transform 和 CSS transition 制作交互动效 通过 jQuery 判断并控制动画的触发条件 接触并使用 animate.css 开源库 任务描述 观看视频 demo 中的交互动效 视频demo 在我们提供给你的 HTML 文件基础上,适当的添加 CSS transition 和 CSS transform 属性,实现视频 demo 中的效果下载.html 文件 要求: 通过 jQuery 判断输入框是否有内容,如果 Email 和 Password 都填充了…

课程结束

难度:困难时间:大约需要2

122人在学习该课程,有58人已经完成该课程

No.8 - 把 AE 动画转换成 Web 原生动画

任务目的 安装 After Effect 并熟悉基本操作 利用 Lottie 导出制作一个复杂的 Web 动画 实现一个炫酷的带动画的官网首页任务描述 下载我们提供给你的设计稿以及 AE 源文件,通过 Lottie 导出 Web 可用的 json 文件,实现预览demo 中所示首页动画效果 参考资料: Lottie 官方文档:https://github.com/airbnb/lottie-web 预览demo: http://vis.baidu.com/ 资源下载: 下载AE 源文件 学有余力的同学,可以尝试实现 san 官网首页 卡片 hover 效果 要求:鼠标悬浮在卡片上的…