CSS实现动态百分比圆环

96
半生不熟_
0.3 2017.08.07 03:17* 字数 534

效果展示

没掌握上传动图的操作,这里就先截静态图吧

25%
50%

实现思路

自己的思路

一开始看到这个图的时候,想着应该不难

  • 外面一个div,里面一个div,一个背景深蓝色,一个背景白色
  • 蓝色的div加一个伪元素,背景浅蓝色,再裁剪一半

还是先试试,写着写着发现中间各种设置四周边距,才让中间div居中,我都看不下去了

参考了别人的思路

看了有很多例子,一开始没看懂的时候,觉得都写的什么呀,有这么复杂吗,但不知道怎么就突然开了窍,哇,这么简单,原来都是套路呀。

CSS属性

更合理的思路

利用遮罩和裁剪的思想。

  • 想象你有一个浅蓝色的圆圈,一个浅蓝色的半圆圈,一个深蓝色的半圆圈,三个半径一样大;
  • 浅蓝色半圆圈,深蓝色半圆圈,浅蓝色圆圈,从上往下依次堆叠放置;
  • 这时候,你会发现将中间那层深蓝色半圆圈稍作转动,从上忘下俯视,就会发现有你要的效果;
  • HTML设计如下

    HTML结构

  • 最外层div设置宽度为10pxborder,让里面内容居中

    设置大小和内容居中

  • 给内层第一个div(深蓝色半圆圈)设置border,裁剪右半部分,并让其顺时针旋转90°

  • 给外层div设置两个伪元素,分别是after(浅蓝色半圆圈)和before(浅蓝色圆圈)

    before

    after裁剪右半部分

让它动起来

设置从0°开始顺时针旋转90°


利用animation一些属性

这样,一个动态的圆环就成功啦。

web前端