我是学习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);}
}
答案 0 :(得分:15)
有一个非常容易理解和详细的教程,关于Anders Ingemann如何实现这个(以及更多),可以找到here。
这是一个相当复杂的操作 - 所以我只是从这里的教程中提炼最后阶段
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);