【发布时间】：2014-10-04 09:46:18
【问题描述】：
我想创建一个如下所示的计数器圆圈，我使用easy-pie-chart，但我不知道如何设置如下创建的圆圈的样式。有没有办法使用 css 为它们设置样式并使其看起来如下所示？
任何资源或文章都会有帮助。
【问题讨论】：
标签： javascript css svg counter pie-chart
【发布时间】：2014-10-04 09:46:18
【问题描述】：
实际上，这（或与此非常接近的东西）技术上可以通过使用纯 CSS 来完成。
您正在寻找的是相对较新的东西，称为动画。
让我们定义一些可以使用的标记。没什么特别的，只是：
<div id="wheel"></div>
还有，让我们给它一些 CSS：
#wheel {
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid #90F090;
border-right: 5px solid #000070;
}
由于这涉及动画，所以我不会发布沿途的每张图片，但它是这样的：
这看起来很接近您正在寻找的东西，并且通过一些操作，您可以让它看起来不错，但我假设您希望它动画到正确的百分比。
为了演示，给它添加一个:hover 效果来旋转它：
#wheel:hover {
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
}
#wheel {
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid #90F090;
border-right: 5px solid #000070;
}
#wheel:hover {
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
}<div id="wheel">但是，您希望它自己动画。从 CSS3 开始，有一种方法可以做到这一点！它被称为动画。
总之，一般语法是like this:
/* Chrome, Safari, Opera */
-webkit-animation: <name> <duration> <direction> <delay> <count> <timing function>;
/* Standard syntax */
animation: <name> <duration> <direction> <delay> <count> <timing function>;
= 你给它取的名字。 = 持续多长时间。 - <direction> = 哪个方向（正常/反向/备用）
= 加载后多久开始。 = 执行多少次（或无限次）。 - <timing function> = 指定动画的速度。
呸。好多啊。实际上，现在我们准备开始。
搞定所有这些之后，就该创建动画了。
其语法如下：
/* "Standard" way */
@keyframes <name> {
from {
/* After <duration>, play the animation FROM this state */
}
to {
/* Until it gets TO this state within <duration>'s time */
/* Unless <direction> is reverse/alternate */
}
/* Then repeat <count> times. */
}
/* Engine specific implementations */
@-webkit-keyframes <name>
@-moz-keyframes <name>
@-ms-keyframes <name>
@-o-keyframes <name>
此外，您可以使用percentages（5% 通过动画，在此处。25% 通过，在此处等）代替 from/to。实际上，from 仅表示 0%，to 表示 100%。
现在，在“from”和“to”内将旋转从 0 度固定到 359 度（不是 360，因为 360 度 = 0 度，它不会移动），你自己就有了一个纺车。
#wheel {
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid #90F090;
border-right: 5px solid #000070;
/* Chrome, Safari, Opera */
-webkit-animation: spin 5s linear 2s infinite normal;
/* Standard syntax */
animation: spin 5s linear 2s infinite normal;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}<div id="wheel"></div>问题出在这里。还记得我说过你可以从技术上用纯 CSS 实现这个效果吗？
好吧，我们使用不同颜色的边框来模拟移动的东西（您的“加载”条或“饼图”值）。在一个圆中，每个边框恰好占据了它的 25%...这意味着您在任何时候都只能为 90 度的圆弧设置动画。 p>
解决方案？ 将两个圆圈重叠，让一个圆圈“隐藏”所需的数量，只需轻轻旋转即可。
#container {
width: 110px;
height: 110px;
padding: 0;
margin: 0;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: spin 5s linear 2s infinite normal;
/* Standard syntax */
animation: spin 5s linear 2s infinite normal;
}
#wheel, #hide {
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid #90F090;
border-right: 5px solid #000070;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
#hide {
border-color: #90F090;
border-right: 5px solid transparent;
z-index: 11;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Chrome, Safari, Opera */
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}<div id="container">
<div id="hide"></div>
<div id="wheel"></div>
</div>(Here) 是一个显示较小旋转量的小提琴。
使用透明边框/重叠的组合（或者，像 Tambo 回答的那样，背景渐变），您可以轻松实现您想要的任何弧长。
要拥有一个加载循环，您可以稍微玩一下动画，直到您得到您想要的工作。
但是，您使用的饼图库可以很好地自行处理这项工作。 :)
注意：所有这些的目的是向您展示使用纯 CSS 的动画和圆圈。其余的你可以学习并根据自己的喜好进行调整。
【讨论】：
-
感谢杰斐逊先生的解释。为了简单起见，我选择了 Tambo 的方式。再次感谢。
试试这个
div {
width: 150px;
height:150px;
display: block;
border-radius: 50%;
background-color: #EC5F51;
border: 2px solid #EC5F51;
margin: 50px auto;
position:relative;
background-image:
linear-gradient(180deg, transparent 50%, #ccc 50%),
linear-gradient(90deg, #ccc 50%, transparent 50%);
}
div:before{
content: "pure CSS3";
position: absolute;
width: 114px;
height: 114px;
background: white;
z-index: 1;
border-radius: 50%;
left: 18px;
top: 18px;
line-height:114px;
text-align:center
}
Markup: <div></div>【讨论】：
在我的项目中，我使用了以下饼图。它使用起来很简单。只需进行一些修改即可动态更新您的百分比值。栏的颜色和大小也可以调整。查看文档。
http://rendro.github.io/easy-pie-chart/
var chartColors = ['blue', 'yellow', 'green', 'red'];
$('.easy-pie-chart .number').each(function(i, e) {
var val = Math.round(yourValues);
var chart = $(yourElement).data('easyPieChart');
$(yourElement).children('span').text(val);
$(yourElement).attr('data-percent', val); //add a class attribute in markup
if (!chart) {
$(e).easyPieChart({
animate: 1000, //animation time
size: 75,
lineWidth: 3,
barColor: App.getLayoutColorCode(chartColors[i]),
//and a few more useful properties you'll find that I haven't used
}
else {
chart.update(val);
}
});最后，你可能会发现这个也很有用：
【讨论】：