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

排序
  • 发布时间
  • 浏览量
  • 点赞数
  • 概述 这是IFE2017的任务,也是我选择的第一个任务,练练手。主要实现的是CSS3动画的编写,伪元素的使用,背景图片模糊以及文字流光效果,知识点大概就是这三个。 先看一下实现的效果: 边框从两边散开 这个主要是使用了伪元素::before,::after来实现,在父容器上加上伪元素,里面填写的CSS分别的上下,左右的边框,并定位到相应的位置。在这里父容器使用相对定位,伪元素使用绝对定位,先做好位置。 那么怎么实现边框从两边散开?在hover的时候,分别吧对应的left 和top值变为0,之前设置了相对父容器的50%。 说了这么多,看代码吧 .wrap .caption .container:…

    2858次浏览280评论
  •   《有趣的鼠标悬浮模糊效果》作为糯米学院中的进阶任务,目的主要是让学院通过完成任务,掌握transition、transform、@keyframes等属性的使用,从任务的标签“CSS3、动画、过渡、效果”也能看出其主旨。经过3天的努力,终于把这个任务完成了,通过连续不断的发现bug、解bug,不仅对很多属性进行使用,也越来越有一套独自解决问题的办法。以下是总结。   任务分解:该任务要达到的效果是,当鼠标悬浮在按钮上方时,按钮上的文字由透明到上浮淡出,文字上有的颜色有流光渐变效果,按钮的边框从上、右、下、左四边的中间出现并向两端扩展至衔接在一起,按钮的背景由清晰变为模糊。则按以上要求,可以…

    1219次浏览41评论
  • CSS动画学习笔记2017-02-24 18:07

    看到贴吧里面有同学觉得课程对初学者不是很友好,我就把自己以前学 CSS 动画时候的一篇笔记贴出来吧。。可能对于本题不一定能直接解决问题,但是应该会比较有启发性。由于这个 markdown 不能直接贴 jsfiddle,就劳烦大家一一点开吧。。 原文地址:CSS 动画学习笔记 一直以来,我对于 CSS 的好感度是要略小于 Javascript 的,它给我的感觉是对网页的作用只有布局上,似乎用途只有老生常谈的 N 栏布局之类,不像 Javascript 负责交互、后端开发负责逻辑。我之前阅读的一本书《精通 CSS》,书虽然是好书,但解决问题的思路停留在 CSS2 时代,涉及的多是网页布局方面,几乎…

    2360次浏览60评论
  • 主要是用下面几个CSS属性实现的: background-image -webkit-background-clip -webkit-text-fill-color background-size animation 具体实现 绘制渐变背景图 background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);使用CSS3的渐变绘制图像,从左到右。需要注意的是颜色是 0到49%的颜色组 = 50%到99%的颜色组,且最后100%的颜色要和开头0的颜色相等这是为了能无缝衔接流…

    5304次浏览9423评论