我怎样才能让使用CSS3

Question

这样的百分比曲线怎样才能让使用CSS3

Answer 1

看到这个link

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