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

纯CSS实现圆形/半圆/弧形+Loading效果实现思路

作者黄子尧课程CSS3饼状loading效果6571次浏览202017-02-27 10:23

CCS3饼状Loading效果

纯CSS实现圆形/半圆/弧形

  • border-radius设置为正方形div的长度的一半可得到原型或者圆弧。
  • 将两个半圆拼凑成一个正圆。
  • 设置widthheight设置为0,设置border-widthborder-radius为圆的半径,通过设置每条border的颜色可以改变每个直角扇形的颜色,同理可以组合形成半圆、270°扇形。例如为一个div设置css样式如下:

#div{
  width: 0;
  height: 0;
  border: 100px solid;
  border-radius: 100px;
  border-top-color: lightgreen;
  border-right-color: deepskyblue;
  border-bottom-color: dodgerblue;
  border-left-color: royalblue;
}

则有如下效果:

示意图

  • 通过clip-path可产生圆形、以矩形的四边为直径的半圆、以矩形的四边为弦的弓形。
  • 通过设置盒的非对角的border-radius为所夹边长度的一半,则可得到以矩形的四边为直径的半圆。

Loading效果实现思路

观察效果图得知,整体效果可以分为两部分,首先是外层的四分之三弧线的旋转,以及内层的较为复杂的旋转。
由于弧长为圆周的3/4,则可采用前部分所述的第一种方法,设置某条边的border-colortransparent即可。旋转则使用CSS3 Animation配合transform即可。
内层较为复杂的旋转可以分为两层效果来实现,最底层为一个如图所示的正圆:

在其上有两个颜色各异的半圆在进行如图所示的旋转(单个周期):

即可实现示意图中的效果。

1条评论