JSDM

HTML

​x
 
1
<div class="container">
2
  <div class="row">
3
    <div class="col-md-12">
4
      <h1>Animated SVG stroke-dasharray</h1>
5
<svg class="col-md-12" viewBox="0 0 220 213" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
6
    <title>labyrint 1</title>
7
    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
8
    <defs></defs>
9
    <g transform="translate(100, 100)" id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
10
      <line x1="-100" y1="0" x2="100" y2="0" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="32s" repeatCount="indefinite" /></line>
11
      <line x1="0" y1="-100" x2="0" y2="100" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="32s" repeatCount="indefinite" /></line>
12
        <circle id="mur-1" stroke="#8B572A" stroke-dasharray="10,10,1000" sketch:type="MSShapeGroup" cx="0" cy="0" r="100"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /</circle>
13
        <circle id="mur-2" stroke="#8B572A" stroke-dasharray="40,10,2000" sketch:type="MSShapeGroup" cx="0" cy="0" r="90"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /></circle>
14
        <line x1="-100" y1="0" x2="100" y2="0" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="64s" repeatCount="indefinite" /></line>
15
      <line x1="0" y1="-100" x2="0" y2="100" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="64s" repeatCount="indefinite" /></line>
16
    </g>
17
</svg>
18
​
19
    </div>
20
 </div>
21
</div>
22
​
23
​
24
​

CSS

xxxxxxxxxx
11
 
1
svg circle, h1 {
2
  transition: all .2s;
3
}
4
body {
5
  padding: 2em 0px;
6
  background-color: black;
7
  text-align: center;
8
}
9
svg circle {
10
  box-shadow: 0px 0px 10px white;
11
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
32
 
1
var s = "";
2
var ii = 1;
3
for(var i=95; i>10; i-=10) {
4
  var d = Math.PI*2*i;
5
  var f = parseInt(d*.1);
6
  var r1 = parseInt(Math.random()*200);
7
  s+='<circle id="væg-'+(ii++)+'" stroke="#8B572A" stroke-width="11" stroke-dasharray="1,'+f+','+r1+'" sketch:type="MSShapeGroup" cx="0" cy="0" r="'+i+'"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /></circle>\n';
8
}
9
​
10
​
11
$('#Page-1').html($('#Page-1').html()+s);
12
​
13
setInterval(function() {
14
      var w = 90;
15
  var cr = parseInt(Math.random()*255);
16
  var cg = parseInt(Math.random()*255);
17
  var cb = parseInt(Math.random()*255);
18
      var stroke = 'rgba('+cr+','+cg+','+cb+','+(Math.random()*.3+.7)+')';
19
  var fill = 'rgba('+(255-cr)+','+(255-cr)+','+(255-cr)+',.08)';
20
  $('h1').css({'color':stroke,'background-color':fill});
21
  $('circle').each(function() {
22
  var dp = "";
23
    for(var i=0; i<Math.random()*4; i++)  {
24
      dp+=(i===0 ? "" : ",")+parseInt(Math.random()*100)
25
    }
26
 var sw = Math.random()*(w/2);
27
    w-=sw;
28
​
29
    $(this).attr({'stroke-width':sw+'px','stroke-dasharray': dp,'stroke':stroke,'r':90-w+'px','fill':fill});
30
  })
31
},3000)
32
​
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................