CSS动画圆形边框填充颜色答案

【问题标题】：CSS animate circle border filling with colorCSS动画圆形边框填充颜色
【发布时间】：2014-06-16 15:30:20
【问题描述】：

我刚开始学习 CSS 动画。我有一个圆弧环绕它，但我想让它留下一条痕迹。我的想法是我会用它来直观地显示某人使用了多少学分，例如使用 75 / 100 积分，圆形边框变为 3/4 着色。

我有一个fiddle 来显示在顶部停止的弧。我需要的是一种方法

1) 根据学分数量让它停在不同的点（我可以在关键帧内以某种方式使用 0%、50% 等，比如通过 jQuery 添加一个类吗？）

2) 留下痕迹，让它充满颜色。

.circle {
/* code - pls see fiddle */

@keyframes animation {
0% {transform: rotate(0);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}

【问题讨论】：

标签： css animation

【解决方案1】：

Anders Ingemann 提供了一个非常易于理解、内容丰富且详细的教程，详细介绍了 Anders Ingemann 如何实现这一目标（以及更多内容），可以在 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;
    }
}

示例 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);

【讨论】：