秒速赛车打不开

您的位置:首頁> 實例代碼> SVG實例

SVG實現的圓環旋轉效果

2017-4-9 11:32|作者: antzone|查看: 9016|評論: 0|來自: 螞蟻部落

BENZHANGJIEFENXIANGYIDUANDAIMASHILI,TASHIYONGsvgSHIXIANLEYUANHUANXUANZHUANXIAOGUO。

XUYAODEPENGYOUKEYIZUOYIXIACANKAO,DAIMASHILIRUXIA:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://glbcf.cn/" /> <title>螞蟻部落</title> <style type="text/css">circle{  -webkit-transition: stroke-dasharray .25s;  transition: stroke-dasharray .25s;}</style><script>window.onload = function () {  if (window.addEventListener) {    var range = document.querySelector("#range");    var circle = document.querySelectorAll("circle")[1];    if (range && circle) {      range.addEventListener("change", function () {        var percent = this.value / 100, perimeter = Math.PI * 2 * 170;        circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1 - percent));      });    }  }}</script></head><body><svg width="440" height="440" viewbox="0 0 440 440">  <circle     cx="220" cy="220"     r="170"     stroke-width="50"     stroke="#D1D3D7"     fill="none">  </circle>  <circle     cx="220" cy="220"     r="170"     stroke-width="50"     stroke="#00A5E0"     fill="none"     transform="matrix(0,-1,1,0,0,440)"     stroke-dasharray="0 1069">  </circle></svg><p>拖我:<input id="range" type="range" min="0" max="100" value="0" style="width:300px;"></p></body></html>

秒速赛车打不开TUODANGANNIUJIKECHAKANHUANXINGXIAOGUO。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部