html - 我怎样才能使用css3制作这样的百分比曲线

Question

我怎样才能使用css3制作这样的百分比曲线

Answer 1

看到这个链接

HTML

<div class="container">
<div id="percent"></div>
<svg id="svg"></svg>
<p><label for="perc-input">Percent:</label><input maxlength="2" type="text" id="input" value="65"/></p>
<a class="btn" id="run">Run</a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Share+Tech);
body {
background: #efefef;
}

.container {
width: 400px;
height: 200px;
position: relative;
margin: auto;
font-family: 'Share Tech', sans-serif;
color: #444;
}

#percent, #svg {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}

#percent {
line-height: 20px;
height: 20px;
width 100%;
top: 90px;
font-size: 43px;
text-align: center;
color: #3da08d;
 opacity: 0.8
}

 p, .btn {
 position: relative;
 left: 220px;
 width: 200px;
 display: block;
 text-transform: uppercase;
 font-size: 24px;
 top: 30px;
}

.btn {
text-align: center;
background: #5fc2af;
color: #fff;
width: 120px;
height: 37px;
line-height: 37px;
cursor: pointer;
}

input {
border: 0;
outline: 0;
border-bottom: 1px solid #eee;
width: 30px;
font-family: helvetica;
font-size: 24px;
text-transform: capitalise;
font-family: 'Share Tech', sans-serif;
background: transparent;
}

JS

var canvasSize = 200,
centre = canvasSize/2,
radius = canvasSize*0.8/2,
s = Snap('#svg'),
path = "",
arc = s.path(path),    
startY = centre-radius,
runBtn = document.getElementById('run'),
percDiv = document.getElementById('percent'),
input = document.getElementById('input');

 input.onkeyup = function(evt) {
if(isNaN(input.value)) {
  input.value = '';
}
};

runBtn.onclick = function() {
 run(input.value/100);
};

function run(percent) {
var endpoint = percent*360;
Snap.animate(0, endpoint,   function (val) {
    arc.remove();

    var d = val,
        dr = d-90;
        radians = Math.PI*(dr)/180,
        endx = centre + radius*Math.cos(radians),
        endy = centre + radius * Math.sin(radians),
        largeArc = d>180 ? 1 : 0;  
        path = "M"+centre+","+startY+" A"+radius+","+radius+" 0 "+largeArc+",1 "+endx+","+endy;

    arc = s.path(path);
    arc.attr({
      stroke: '#3da08d',
      fill: 'none',
      strokeWidth: 12
    });
    percDiv.innerHTML =    Math.round(val/360*100) +'%';

}, 2000, mina.easeinout);  
}

 run(input.value/100);

通过rachstock