CSS中部分完成的圆（带文本）
我尝试在设计中创建以下效果：CSS中部分完成的圆（带文本）,css,text,numbers,geometry,Css,Text,Numbers,Geometry,我尝试在设计中创建以下效果： 我可以很好地创建一个带边框的圆，但是部分完成圆的问题被证明是困难的。使用Javascript和Canvas有无数种不同的方法来实现这一点，但我找不到一种可靠的方法在CSS中实现这一点。我不介意为不同的值使用多个不同的类，但是有没有一个优雅的解决方案可用？更新了：使用纯CSS3很可能做到这一点 （您应该能够打开下面的演示并根据您的结果进行自定义） 使用@关键帧在数字之间切换。你需要加上这个 下面是使用@关键帧“旋转”{进行圆周运动 body{背景：#222；} .圆
我可以很好地创建一个带边框的圆，但是部分完成圆的问题被证明是困难的。使用Javascript和Canvas有无数种不同的方法来实现这一点，但我找不到一种可靠的方法在CSS中实现这一点。我不介意为不同的值使用多个不同的类，但是有没有一个优雅的解决方案可用？更新了：使用纯CSS3很可能做到这一点 （您应该能够打开下面的演示并根据您的结果进行自定义） 使用
@关键帧@关键帧“旋转”{body{背景：#222；}
.圆圈{
宽度：100px；
高度：100px；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
保证金：自动；
背景：#333；
边界半径：50%；
}
.内圈{
宽度：92%；
身高：92%；
背景：#222；
边界半径：50%；
保证金：自动；
垂直对齐：中间对齐；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}
斯宾纳先生{
身高：0；
宽度：0；
边界半径：50%；
右边框：50px实心rgba（255255,0.3）；
边框顶部：50px实心透明；
左边框：50px实心透明；
边框底部：50px实心透明；
-webkit动画：无限旋转1.6秒；
动画：无限旋转1.6秒；
}
@-webkit关键帧“旋转”{
从{
-webkit变换：旋转（0）；
变换：旋转（0）；
}
到{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧“旋转”{
从{
-webkit变换：旋转（0）；
变换：旋转（0）；
}
到{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}