大佬教程收集整理的这篇文章主要介绍了CSS动画圆圈边框填充颜色，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个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);}
}
它是一个相当复杂的操作 – 所以我只是简单地从教程中提取最后一个阶段
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.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/2);
.fill {
clip: rect(0px,@circle-size/2,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);
以上是大佬教程为你收集整理的CSS动画圆圈边框填充颜色全部内容，希望文章能够帮你解决CSS动画圆圈边框填充颜色所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。