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

有趣的鼠标悬浮模糊效果

进阶

人数1237人在学习该课程,有331人已经完成该课程

时间平均用时3.2

关键词CSS3动画过渡效果

课程概述

作业提交截止时间:04-24

任务目的

  • 针对设计稿样式进行合理的HTML架构,包括以下但不限于:
  • 掌握常用HTML标签的含义、用法
  • 能够基于设计稿来合理规划HTML文档结构
  • 理解语义化,合理地使用HTML标签来构建页面
  • 掌握基本的CSS编码,包括以下但不限于:
  • 了解CSS的定义、概念、发展简史
  • 掌握CSS选择器的含义和用法
  • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

  • 实现图示效果(点击查看
  • 实现文字的流光渐变动画
  • 背景图需要进行模糊处理
  • 实现按钮边框的从中间到两边扩展开

任务注意事项

  • 示例图仅为参考,不需要完全实现一致,其中的图片、文案均可自行设定
  • 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
  • HTML 及 CSS 代码结构清晰、规范

在线学习参考资料

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
CSS3 字体流光渐变效果2017-02-24 13:36523594
CSS3动画的编写及伪元素的使用2017-02-28 10:52278528
CSS动画学习笔记2017-02-24 18:0722956
点击查看更多课程优秀笔记