.circle {
position: relative;
margin: 7em auto;
width: 16em;
height: 16em;
border-radius: 50%;
background: lightblue;
}
.arc {
overflow: hidden;
position: absolute;
/* make sure top & left values are - the width of the border */
/* the bottom right corner is the centre of the parent circle */
top: -1em;
right: 50%;
bottom: 50%;
left: -1em;
/* the transform origin is the bottom right corner */
transform-origin: 100% 100%;
/* rotate by any angle */
/* the skew angle is 90deg - the angle you want for the arc */
transform: rotate(45deg) skewX(30deg);
}
.arc:before {
box-sizing: border-box;
display: block;
border: solid 1em navy;
width: 200%;
height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
// create a circle using HTML5 / CSS3 / JS which has a border that only goes part-way around
// the circle .. and which can be smoothly animated from 0% to 100% around the circle
// this solution allows for animation and still results in relatively clean code
// we use four quarter-circles, all hidden away behind a white square to start with..
// all four are rotated out clockwise, and each quarter will stop at it's own maximum:
// q1 at 25%, q2 at 50% .. etc. once we reach a value at or over 25%, all four quarters
// should be out from behind the white square, and we can hide it.. it needs to be
// hidden if we display a value over 75%, or else q4 will end up going in behind it again
// .. also, since the top border will usually sit between the angles of -45 to 45, we
// rotate everything by an extra -45 to make it all line up with the top nicely
var fromHidden = -90;
// utility function to align 0 degrees with top
// takes degrees and returns degrees - 45
function topAlign(degrees) {
return degrees - 45
};
// utility function to rotate a jQuery element
// takes element and the degree of rotation (from the top)
function rotate(el, degrees) {
var degrees = topAlign(degrees || 0);
el.css(
'transform', 'rotate(' + degrees + 'deg)',
'-webkit-transform', 'rotate(' + degrees + 'deg)',
'-moz-transform', 'rotate(' + degrees + 'deg)',
'-ms-transform', 'rotate(' + degrees + 'deg)',
'-o-transform', 'rotate(' + degrees + 'deg)'
)
}
// function to draw semi-circle
// takes a jQuery element and a value (between 0 and 1)
// element must contain four .arc_q elements
function circle(el, normalisedValue) {
var degrees = normalisedValue * 360; // turn normalised value into degrees
var counter = 1; // keeps track of which quarter we're working with
el.find('.arc_q').each(function() { // loop over quarters..
var angle = Math.min(counter * 90, degrees); // limit angle to maximum allowed for this quarter
rotate($(this), fromHidden + angle); // rotate from the hiding place
counter++; // track which quarter we'll be working with in next pass over loop
});
if (degrees > 90) { // hide the cover-up square soon as we can
el.find('.arc_cover').css('display', 'none');
}
}
// uses the the circle function to 'animate' drawing of the semi-circle
// incrementally increses the value passed by 0.01 up to the value required
function animate(el, normalisedValue, current) {
var current = current || 0;
circle(el, current);
if (current < normalisedValue) {
current += 0.01;
setTimeout(function() {
animate(el, normalisedValue, current);
}, 1);
}
}
// kick things off ..
animate($('.circle'), 0.69);
8条答案
按热度按时间shstlldc1#
是的，这是可能的-看看这个：
∮ ∮ ∮
bqucvtff2#
有可能。
border-radius绘制两个圆，一个在另一个的顶部。border-color，使两个圆的一个或多个圆弧transparent。transform旋转第二个圆，您将获得所需大小的圆弧。以下是演示：http://jsfiddle.net/kJXwZ/2/
l5tcr1uw3#
这也使用了JavaScript，所以它打破了最初的要求：（
。。但是它确实提供了
这里有一个〉〉demo〈〈
@gkond谢谢，我从你的回答中得出了这个
dgsult0t4#
圆锥梯度解（适用于任何度数）：
tcomlyy65#
要做到这一点，你可以使用简单的框边框属性，一个元素和一个类。这将是一个内联，内联块或块处理，这取决于你把你的简单循环类，以及如何/如果你的风格位置。
vd2z7a6w6#
这可以通过在透明圆周围设置透明边框并使用
border-top-color: ;给予圆边框的一部分赋予颜色来实现。这将创建一个仅在顶部四分之一周围具有边界的圆;
您也可以使用
以及左和右以界定圆圆周的不同四分之一。
这里有一个小提琴的装载机与3部分圆内旋转对方在交替的方向，显示这在行动。
Here's a fiddle for a loader with 3 partial circles that spin inside each other in alternate directions that show this in action.
xeufq47z7#
最简单的动画制作方法是使用css关键帧。
http://jsfiddle.net/8SUPX/644/
olqngx598#
如果你想要双边框，你也可以使用它