css文字填充在圆形边框内,CSS动画圆圈边框填充颜色

SW4..

15

有一个非常容易理解和详细的教程,关于Anders Ingemann如何实现这个(以及更多),可以在这里找到.

它是一个相当复杂的操作 - 所以我只是简单地从教程中提取最后一个阶段

HTML

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