CSS CSS动画圆形边框填充颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23385924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS animate circle border filling with color
提问by VictorySaber
I'm new to learning about CSS animations. I have a circle with an arc going around it, but I want to make it leave a trail behind. The idea is I'd use this to visually show how many credits somebody has used e.g. 75 / 100 credits used, the circle border becomes 3/4 colored-in.
我刚开始学习 CSS 动画。我有一个圆弧围绕它，但我想让它留下一条轨迹。这个想法是我会用它来直观地显示某人使用了多少学分，例如使用了 75 / 100 个学分，圆形边框变为 3/4 彩色。
I have a fiddleto show the arc stopping at the top. What I need is a way to
我有一个小提琴来显示停止在顶部的弧线。我需要的是一种方法
1) Make it stop at different points depending on the number of credits (can I use the 0%, 50% etc. inside keyframes somehow, like adding a class via jQuery?)
1) 根据积分数让它在不同的点停止（我可以在关键帧内以某种方式使用 0%、50% 等，比如通过 jQuery 添加一个类？）
2) Leave a trail behind, so it fills with color.
2）留下痕迹，让它充满颜色。
.circle {
/* code - pls see fiddle */
@keyframes animation {
0% {transform: rotate(0);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
回答by SW4
There is a very easy to follow, informative and detailed tutorial on exactly how to achieve this (and more) by Anders Ingemann, which can be found here.
安德斯·英格曼 (Anders Ingemann) 提供了一个非常易于遵循、内容丰富且详细的教程，具体说明了如何实现这一点（以及更多内容），可在此处找到。
Its a fairly complex operation- so I'll simply distil the final stage from the tutorial here
这是一个相当复杂的操作 - 所以我将简单地从这里的教程中提取最后阶段
Demo Fiddle
演示小提琴
HTML
HTML
<div class="radial-progress">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset"></div>
</div>
CSS/LESS
CSS/更少
.radial-progress {
@circle-size: 120px;
@circle-background: #d6dadc;
@circle-color: #97a71d;
@inset-size: 90px;
@inset-color: #fbfbfb;
@transition-length: 1s;
@shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
margin: 50px;
width: @circle-size;
height: @circle-size;
background-color: @circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: @circle-size;
height: @circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: @shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform @transition-length;
transition: -ms-transform @transition-length;
transition: transform @transition-length;
}
.mask {
clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
.fill {
clip: rect(0px, @circle-size/2, @circle-size, 0px);
background-color: @circle-color;
}
}
}
.inset {
width: @inset-size;
height: @inset-size;
position: absolute;
margin-left: (@circle-size - @inset-size)/2;
margin-top: (@circle-size - @inset-size)/2;
background-color: @inset-color;
border-radius: 50%;
box-shadow: @shadow;
}
}
Example jQuery (could be substituted with CSS)
示例 jQuery（可以用 CSS 代替）
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function () {
var rotation = Math.floor(Math.random() * 180);
var fill_rotation = rotation;
var fix_rotation = rotation * 2;
for (i in transform_styles) {
$('.circle .fill, .circle .mask.full').css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
$('.circle .fill.fix').css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
}
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
