CSS实现动态百分比圆环

效果展示

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

25%

50%

实现思路

自己的思路

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

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

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

参考了别人的思路

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

CSS属性

• clip 设置裁剪，详细介绍看这里
• transform 设置旋转，详细介绍看这里
• animation 一个简写属性，用于设置六个动画属性，详细介绍看这里

更合理的思路

利用遮罩和裁剪的思想。

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

• HTML设计如下
  

  

  HTML结构

• 最外层div设置宽度为10px的border，让里面内容居中
  

  

  设置大小和内容居中

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

  

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

  

  before
  
  
  

  after裁剪右半部分

让它动起来

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

利用animation一些属性

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