Javascript 可缩放css百分比环

我试图将下面的代码基本上转换成一个可伸缩的版本，我尝试使用vw和vh、%值等，但我似乎无法获得正确的值平衡。感谢您的帮助

此代码笔还可能有助于：

.arrow{
位置：相对位置；
高度：0px；
宽度：0px；
边框顶部：18px实心#dd1111；
左边框：11px实心透明；
右边框：11px实心透明；
位置：绝对位置；
底部：40px；
左：57px；
z指数：1；
动画：加载箭头1.6s线性；
动画填充模式：正向；
-webkit动画：加载箭头1.6s线性；
-webkit动画填充模式：正向；
}
@关键帧加载箭头{
从{
变换：平移（0,0）；
}
到{
转换：转换（0，55px）；
}
}
@-webkit关键帧加载箭头{
从{
-webkit转换：转换（0,0）；
}
到{
-webkit转换：转换（0，55px）；
}
}
.馅饼{
宽度：140px；
高度：140像素；
位置：相对位置；
边界半径：140像素；
背景色：#DD1111；
浮动：左；
右边距：10px；
}
.馅饼.头衔{
位置：绝对位置；
底部：-40px；
文本对齐：居中；
宽度：100%；
}
.面具{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.1.右内侧{
变换：旋转（160度）；
动画：load-right-pie-1 1s线性；
-webkit动画：load-right-pie-1 1s线性；
-webkit变换：旋转（160度）；
}
@关键帧load-right-pie-1{
从{
变换：旋转（0度）；
}
到{
变换：旋转（160度）；
}
}
@-webkit关键帧load-right-pie-1{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（160度）；
}
}
.左外{
剪辑：rect（0px 70px 140px 0px）；
}
.外右翼{
剪辑：rect（0px 140px 140px 70px）；
}
.左内侧{
背景色：#710000；
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：100%；
剪辑：rect（0px 70px 140px 0px）；
变换：旋转（-180度）；
-webkit变换：旋转（-180度）；
}
.内右翼{
背景色：#710000；
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：100%；
剪辑：rect（0px 70px 140px 0px）；
变换：旋转（180度）；
-webkit变换：旋转（180度）；
}
.内容{
宽度：100px；
高度：100px；
边界半径：50%；
背景色：#fff；
位置：绝对位置；
顶部：20px；
左：20px；
线高：100px；
字体系列：arial，无衬线；
字体大小：35px；
文本对齐：居中；
z指数：2；
}
.内容跨度{
不透明度：0；
动画：加载内容3s；
动画填充模式：正向；
动画延迟：0.6s；
-webkit动画：加载内容3s；
-webkit动画填充模式：正向；
-webkit动画延迟：0.6s；
}
@关键帧加载内容{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@-webkit关键帧加载内容{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

啁啾
44%

这是一个很好的插件。这是和

---

希望这能解决您的问题。

您可以使用

svg

和JavaScript简化代码并使其动态化

这个代码是做什么的

从

文本

标记中提取百分比值，计算角度并将其存储到动画中

将深色零件从

θ=0

设置为计算角度的动画

使用此方法可以做的事情：

只需更改

文本

标记中的

44%

，即可动态设置百分比。

• 有效格式-->

  -%

  -%|

  -%

  ，包括浮点值

您可以通过更改

t

变量来更改动画速度

你也可以让它反应灵敏

---

svg的

宽度和
高度取决于
#容器
的
宽度


var dark=document.getElementById（'dark'），
t=5，
percentage=parseInt（document.getElementById（'perc'）.innerHTML.slice（0，-1），10），
θ=0，
最大θ=（180*百分比）/50，
radius=document.getElementById（'svg'）.getBBox（）.width/2；
setAttribute（'transform'，'translate（'+radius+'，'+radius+'））；
var animate=setInterval（函数（）{
θ+=0.5；
变量d='M0,0v'+-radius++'A'+radius++'，'+radius++'1'+（（θ>180）？1:0）+'，1'+Math.sin（θ*Math.PI/180）*radius++'，'+Math.cos（θ*Math.PI/180）*-radius++'z'；
暗.setAttribute（'d'，d）；
如果（θ>最大θ）{
clearInterval（动画）；
}
}，t）

44%
如果您使用
svg
，这可以简化为少于10行（包括动画）。我从未使用过svg，因此我不使用它。。。但请告诉我有多确定，我会写一个答案。：）我尝试过使用这个插件，但实现起来非常奇怪，试图让我的网站插件保持免费，因为它会减慢速度。如果需要的话，我会回到他们的芯片上，我在mozilla中使用的代码有问题，你能解释一下吗？克里斯