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

排序
  • 发布时间
  • 浏览量
  • 点赞数
  •   《CSS3圆饼loading效果》作为糯米学院中的进阶任务,目的主要是让学员通过完成任务,掌握border-radius属性的使用以及旋转动画的设置。在已经完成鼠标悬浮效果任务之后,相对来说本任务要简单很多。以下是总结。   任务分解:该任务要达到的效果。如网页中显示情况,可将任务分解为两个小任务: 1.制作四分之三圆环并旋转;2.制作圆饼,圆饼内有两种颜色,分别交替旋转扩大其扇形区域(从0deg到到360deg),以达到圆饼loading效果。   通过完成任务,使用到如下一些重要属性: 1.制作圆环,使用伪元素,使用border(包括其transparent值);2.制作圆饼过程中,使…

    3102次浏览10评论
  • 实现3 / 4圆环 我们假设要创建的圆环节点的半径为R,首先是将div变成圆环。 { border: solid color 2px; border-radius: R / 2 px; } 接下来我们将圆环设为3 / 4圆环。想想一个div节点,如果我们只为其设置3边的border,那么不就是3 / 4矩形环吗,那么圆环呢?试一下。 { border: solid color 2px; border-radius: R / 2 px; border-top-color: transparent; } 果然和我们想的一样,这下圆环就完成了。 实现圆饼 先来…

    2450次浏览30评论
  • CCS3饼状Loading效果 纯CSS实现圆形/半圆/弧形 将border-radius设置为正方形div的长度的一半可得到原型或者圆弧。 将两个半圆拼凑成一个正圆。 设置width和height设置为0,设置border-width和border-radius为圆的半径,通过设置每条border的颜色可以改变每个直角扇形的颜色,同理可以组合形成半圆、270°扇形。例如为一个div设置css样式如下: #div{ width: 0; height: 0; border: 100px solid; border-radius: 100px; border-top-co…

    6571次浏览201评论