CSS弧形末端圆润

Question

我试图在CSS样式的文本周围绘制一个动画圆弧，看起来像一个圆角图标。

因为它可以是圆弧或圆形（因为里面的圆形图标会隐藏它的内部部分），有几种解决方案只使用CSS，如this或this。

但我希望这条线在末端圆润。像这样：

我不确定是否有可能。有什么想法吗？

Answer 1

这是一种用动画绘制它的画布方式。关键部分是能够使用context.lineCap = "round";：

来绕线的端盖

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2
var radius = 50;
var startAngle = (Math.PI / 180) * -90
var endAngle = 180
context.lineWidth = 15;
context.lineCap = "round";
var ctr = -90;
var clr = setInterval(function () {
    context.clearRect(0, 0, 300, 150); // clear canvas
    context.beginPath();
    context.arc(x, y, radius, startAngle, (Math.PI / 180) * ctr, false);
    context.stroke();
    ctr++;
    if (ctr == endAngle) clearInterval(clr)
}, 10)

canvas {
    border:1px solid #999;
}

<canvas id="myCanvas" width="300" height="150"></canvas>

Answer 2

http://jsfiddle.net/k6d17fez/1/

好的，所以我扯掉了部分this already working solution并添加了这两段代码：

.wrapper::after{
    content:'';
    display:block;
    width:5px;
    height:5px;
    background:#004466;
    border-radius:50%;
    position:relative;
    left:123px;
    z-index:1000;
}

.wrapper .spinner::after{
    content:'';
    display:block;
    width:5px;
    height:5px;
    background:#004466;
    border-radius:50%;
    position:relative;
    left:118px;
    top:-5px;
    z-index:1000;
}

它实际上在饼的圆周末端添加了两个小圆圈。

这就是Firefox 37.0.1中的样子：

这个解决方案可能有点“快速和肮脏”，但它可以完成这项工作。当然，Canvas更适合这种情况。