CSS动画圈与边框颜色填充 [英] CSS animate circle border filling with color
问题描述
我是新来学习CSS动画。
我有一个弧形围绕它去转了一圈，但我想让它留下痕迹落后。这个想法是我想用这个来直观地展现多少学分已经有人使用例如使用百分之七十五学分，圆边框变成3/4彩色项。
我有一个小提琴显示圆弧顶部停止。我需要的是一种方法来
1），使之停止在不同的点，这取决于信用的数量（我可以使用的0％，50％等内的关键帧不知何故，就像通过jQuery添加类？）
2）留下痕迹的后面，所以它与颜色填充。
.circle {
/ * code - 请参见小提琴* /@keyframes动画{
0％{变换：旋转（0）;}
50％{变换：旋转（180deg）;}
100％{变换：旋转（360deg）;}
}
有一个由Anders Ingemann，可以发现<很容易执行，信息和详细的教程上究竟是如何做到这一点（更多） href=\"https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9\">here.
它是一个相当复杂的操作 - 所以我会简单地提炼从这里本教程的最后阶段。
演示小提琴
HTML
＆LT; DIV CLASS =径向进步＆GT;
＆LT; DIV CLASS =圈子＆GT;
＆LT; DIV CLASS =面具充满＆GT;
＆LT; DIV CLASS =补＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面具一半＆GT;
＆LT; DIV CLASS =补＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =填充修复＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =影子＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =插入＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
CSS / LESS
.radial正在进行{
@圈尺寸：120像素;
@圆背景：＃d6dadc;
@圈颜色：＃97a71d;
@插图大小：90像素;
@插图颜色：#fbfbfb;
@过渡长度：1秒;
@shadow：6像素6像素10px的RGBA（0，0，0，0.2）;
保证金：50像素;
宽度：@圈大小;
高度：@圈大小;
背景色：// @圆背景;
边界半径：50％;
.circle {
.mask，.fill伪，.shadow {
宽度：@圈大小;
高度：@圈大小;
位置：绝对的;
边界半径：50％;
}
.shadow {
箱阴影：@shadow插图;
}
.mask，{.fill伪
-webkit-背面能见度：隐藏;
过渡：-webkit-变换@过渡长度;
过渡：-ms变换@过渡长度;
过渡：// @改造过渡长度;
}
.mask {
片段：矩形（0像素，@圈尺寸，圈@大小，@圈尺寸/ 2）;
。填 {
片段：矩形（0像素，@圈尺寸/ 2，@圈大小，0像素）;
背景色：// @圆色;
}
}
}
.inset {
宽度：@插入尺寸;
高度：@插入尺寸;
位置：绝对的;
保证金左：（@圆圈大小 - @插图大小）/ 2;
缘顶：（@圆大小 - @插图尺寸）/ 2;
背景色：// @小图色;
边界半径：50％;
箱阴影：@shadow;
}
}
例的jQuery（可以用CSS来代替）
$（'头型[TYPE =文/ CSS]'）ATTR（'型'，'文/少）;
less.refreshStyles（）;
VAR transform_styles = ['-webkit-改造'，'-ms变换'，'改造'];
window.randomize =功能（）{
VAR旋转= Math.floor（的Math.random（）* 180）;
VAR fill_rotation =旋转;
VAR fix_rotation =旋转* 2;
为（i的transform_styles）{
（'。.fill伪圈，.circle .mask.full'）。$ CSS（transform_styles [I]，旋转（'+ fill_rotation +'度）'）;
$（'圈子.fill.fix。'）的CSS（transform_styles [I]，旋转（'+ fix_rotation +'度）'）。
}
}
的setTimeout（window.randomize，200）;
$（'。径向进步'）点击（window.randomize）;
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.
I have a fiddle to 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?)
2) Leave a trail behind, so it fills with color.
.circle {
/* code - pls see fiddle */
@keyframes animation {
0% {transform: rotate(0);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
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.
Its a fairly complex operation- so I'll simply distil the final stage from the tutorial here
Demo Fiddle
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
.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)
$('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);
这篇关于CSS动画圈与边框颜色填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
