JSDM

HTML

124
1
<div class="bg">
2
<svg version="1.1" baseProfile="tiny" id="chart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
3
   x="0px" y="0px" width="366.037px" height="261.026px" viewBox="0 0 366.037 261.026" xml:space="preserve">
4
<g>
5
  <path fill="#D7F073" d="M106.628,235.698l2.871-2.597c1.266-1.155,1.705-1.815,1.705-2.63c0-1.001-0.813-1.649-1.738-1.649
6
    c-0.979,0-1.617,0.506-2.255,1.43l-0.43-0.286c0.672-1.022,1.387-1.65,2.74-1.65c1.309,0,2.288,0.913,2.288,2.112v0.022
7
    c0,1.056-0.572,1.76-1.926,2.992l-2.354,2.135h4.356v0.55h-5.259V235.698z"/>
8
  <path fill="#D7F073" d="M113.172,234.873l0.44-0.363c0.616,0.781,1.386,1.232,2.398,1.232c1.034,0,1.903-0.693,1.903-1.705v-0.022
9
    c0-1.078-1.013-1.672-2.398-1.672h-0.418l-0.144-0.319l2.651-3.059h-4.037v-0.539h4.818v0.407l-2.607,2.981
10
    c1.464,0.088,2.729,0.77,2.729,2.178v0.022c0,1.342-1.177,2.244-2.508,2.244C114.746,236.259,113.799,235.687,113.172,234.873z"/>
11
  <path fill="#D7F073" d="M119.795,230.329v-0.022c0-1.033,0.682-1.969,1.705-1.969c1.012,0,1.683,0.936,1.683,1.947v0.021
12
    c0,1.034-0.682,1.97-1.705,1.97C120.466,232.276,119.795,231.353,119.795,230.329z M120.367,230.285v0.021
13
    c0,0.869,0.518,1.497,1.134,1.497c0.648,0,1.111-0.649,1.111-1.475v-0.022c0-0.857-0.518-1.496-1.134-1.496
14
    C120.83,228.811,120.367,229.482,120.367,230.285z M126.253,228.426h0.594l-2.938,3.993l-2.718,3.708h-0.594l2.915-3.961
15
    L126.253,228.426z M124.261,234.268v-0.021c0-1.034,0.683-1.97,1.706-1.97c1.012,0,1.683,0.936,1.683,1.947v0.022
16
    c0,1.034-0.682,1.969-1.705,1.969C124.933,236.215,124.261,235.291,124.261,234.268z M127.078,234.268v-0.021
17
    c0-0.858-0.517-1.497-1.133-1.497c-0.649,0-1.111,0.672-1.111,1.475v0.022c0,0.869,0.518,1.496,1.134,1.496
18
    C126.616,235.742,127.078,235.093,127.078,234.268z"/>
19
  <path fill="#D7F073" d="M132.115,234.499v-0.022c0-1.166,1.001-1.826,2.453-1.826c0.781,0,1.32,0.099,1.859,0.242v-0.242
20
    c0-1.133-0.693-1.716-1.849-1.716c-0.682,0-1.243,0.187-1.76,0.451l-0.198-0.474c0.616-0.286,1.221-0.484,1.991-0.484
21
    c0.759,0,1.364,0.209,1.771,0.616c0.374,0.374,0.571,0.892,0.571,1.585v3.498h-0.527v-0.936c-0.386,0.539-1.078,1.067-2.146,1.067
22
    C133.237,236.259,132.115,235.665,132.115,234.499z M136.438,234.025v-0.638c-0.473-0.121-1.101-0.253-1.903-0.253
23
    c-1.188,0-1.849,0.527-1.849,1.309v0.022c0,0.814,0.771,1.287,1.629,1.287C135.458,235.753,136.438,235.049,136.438,234.025z"/>
24
  <path fill="#D7F073" d="M138.043,230.517h0.627l2.123,5.005l2.146-5.005h0.605l-2.52,5.654h-0.462L138.043,230.517z"/>
25
  <path fill="#D7F073" d="M144.357,233.333v-0.022c0-1.628,1.145-2.927,2.663-2.927c1.573,0,2.574,1.276,2.574,2.938
26
    c0,0.1,0,0.132-0.011,0.221h-4.654c0.1,1.396,1.101,2.211,2.2,2.211c0.869,0,1.464-0.385,1.926-0.88l0.374,0.33
27
    c-0.572,0.616-1.243,1.056-2.321,1.056C145.633,236.259,144.357,235.082,144.357,233.333z M149.011,233.058
28
    c-0.077-1.133-0.727-2.179-2.014-2.179c-1.111,0-1.969,0.936-2.068,2.179H149.011z"/>
29
  <path fill="#D7F073" d="M151.244,230.517h0.539v1.595c0.439-1.001,1.375-1.728,2.486-1.684v0.595h-0.056
30
    c-1.298,0-2.431,0.979-2.431,2.805v2.3h-0.539V230.517z"/>
31
  <path fill="#D7F073" d="M155.16,234.499v-0.022c0-1.166,1.001-1.826,2.453-1.826c0.781,0,1.32,0.099,1.859,0.242v-0.242
32
    c0-1.133-0.693-1.716-1.849-1.716c-0.682,0-1.243,0.187-1.76,0.451l-0.198-0.474c0.616-0.286,1.221-0.484,1.991-0.484
33
    c0.759,0,1.364,0.209,1.771,0.616c0.374,0.374,0.571,0.892,0.571,1.585v3.498h-0.527v-0.936c-0.386,0.539-1.078,1.067-2.146,1.067
34
    C156.282,236.259,155.16,235.665,155.16,234.499z M159.483,234.025v-0.638c-0.473-0.121-1.101-0.253-1.903-0.253
35
    c-1.188,0-1.849,0.527-1.849,1.309v0.022c0,0.814,0.771,1.287,1.629,1.287C158.503,235.753,159.483,235.049,159.483,234.025z"/>
36
  <path fill="#D7F073" d="M161.836,237.051l0.319-0.439c0.671,0.517,1.441,0.792,2.266,0.792c1.288,0,2.201-0.737,2.201-2.179v-0.813
37
    c-0.484,0.692-1.232,1.298-2.344,1.298c-1.354,0-2.695-1.034-2.695-2.641v-0.021c0-1.617,1.342-2.663,2.695-2.663
38
    c1.122,0,1.881,0.595,2.344,1.255v-1.122h0.539v4.741c0,0.814-0.265,1.452-0.716,1.903c-0.483,0.484-1.21,0.748-2.035,0.748
39
    C163.476,237.909,162.607,237.623,161.836,237.051z M166.655,233.058v-0.022c0-1.298-1.154-2.134-2.321-2.134
40
    c-1.177,0-2.167,0.813-2.167,2.123v0.022c0,1.265,1.012,2.145,2.167,2.145C165.5,235.191,166.655,234.334,166.655,233.058z"/>
41
  <path fill="#D7F073" d="M168.875,233.333v-0.022c0-1.628,1.145-2.927,2.663-2.927c1.573,0,2.574,1.276,2.574,2.938
42
    c0,0.1,0,0.132-0.011,0.221h-4.654c0.1,1.396,1.101,2.211,2.2,2.211c0.869,0,1.464-0.385,1.926-0.88l0.374,0.33
43
    c-0.572,0.616-1.243,1.056-2.321,1.056C170.152,236.259,168.875,235.082,168.875,233.333z M173.53,233.058
44
    c-0.077-1.133-0.727-2.179-2.014-2.179c-1.111,0-1.969,0.936-2.068,2.179H173.53z"/>
45
  <path fill="#D7F073" d="M178.524,234.499v-0.022c0-1.166,1.001-1.826,2.453-1.826c0.781,0,1.32,0.099,1.859,0.242v-0.242
46
    c0-1.133-0.693-1.716-1.849-1.716c-0.682,0-1.243,0.187-1.76,0.451l-0.198-0.474c0.616-0.286,1.221-0.484,1.991-0.484
47
    c0.759,0,1.364,0.209,1.771,0.616c0.374,0.374,0.571,0.892,0.571,1.585v3.498h-0.527v-0.936c-0.386,0.539-1.078,1.067-2.146,1.067
48
    C179.646,236.259,178.524,235.665,178.524,234.499z M182.847,234.025v-0.638c-0.473-0.121-1.101-0.253-1.903-0.253
49
    c-1.188,0-1.849,0.527-1.849,1.309v0.022c0,0.814,0.771,1.287,1.629,1.287C181.868,235.753,182.847,235.049,182.847,234.025z"/>
50
  <path fill="#D7F073" d="M185.343,230.517h0.539v1.045c0.374-0.66,1.001-1.178,2.024-1.178c1.419,0,2.244,0.969,2.244,2.311v3.433
51
    h-0.539v-3.333c0-1.155-0.649-1.915-1.782-1.915c-1.101,0-1.947,0.836-1.947,2.003v3.245h-0.539V230.517z"/>
52
  <path fill="#D7F073" d="M192.13,230.517h0.539v1.045c0.374-0.66,1.001-1.178,2.024-1.178c1.419,0,2.244,0.969,2.244,2.311v3.433
53
    h-0.539v-3.333c0-1.155-0.649-1.915-1.782-1.915c-1.101,0-1.947,0.836-1.947,2.003v3.245h-0.539V230.517z"/>
54
  <path fill="#D7F073" d="M198.807,233.948v-3.432h0.539v3.333c0,1.155,0.649,1.914,1.782,1.914c1.101,0,1.947-0.836,1.947-2.002
55
    v-3.245h0.539v5.61h-0.539v-1.045c-0.374,0.66-1.001,1.177-2.024,1.177C199.632,236.259,198.807,235.291,198.807,233.948z"/>
56
  <path fill="#D7F073" d="M205.209,234.499v-0.022c0-1.166,1.001-1.826,2.453-1.826c0.781,0,1.32,0.099,1.859,0.242v-0.242
57
    c0-1.133-0.693-1.716-1.849-1.716c-0.682,0-1.243,0.187-1.76,0.451l-0.198-0.474c0.616-0.286,1.221-0.484,1.991-0.484
58
    c0.759,0,1.364,0.209,1.771,0.616c0.374,0.374,0.571,0.892,0.571,1.585v3.498h-0.527v-0.936c-0.386,0.539-1.078,1.067-2.146,1.067
59
    C206.332,236.259,205.209,235.665,205.209,234.499z M209.533,234.025v-0.638c-0.473-0.121-1.101-0.253-1.903-0.253
60
    c-1.188,0-1.849,0.527-1.849,1.309v0.022c0,0.814,0.771,1.287,1.629,1.287C208.553,235.753,209.533,235.049,209.533,234.025z"/>
61
  <path fill="#D7F073" d="M212.073,228.096h0.539v8.031h-0.539V228.096z"/>
62
  <path fill="#D7F073" d="M217.55,235.423l0.319-0.429c0.616,0.473,1.298,0.736,2.013,0.736c0.76,0,1.354-0.418,1.354-1.066v-0.022
63
    c0-0.66-0.704-0.902-1.485-1.122c-0.913-0.264-1.925-0.539-1.925-1.54v-0.022c0-0.901,0.759-1.551,1.848-1.551
64
    c0.671,0,1.431,0.242,1.991,0.616l-0.286,0.451c-0.517-0.342-1.133-0.562-1.727-0.562c-0.771,0-1.276,0.418-1.276,0.979v0.021
65
    c0,0.627,0.759,0.858,1.562,1.09c0.901,0.253,1.848,0.583,1.848,1.573v0.021c0,1.001-0.857,1.64-1.936,1.64
66
    C219.036,236.237,218.144,235.907,217.55,235.423z"/>
67
  <path fill="#D7F073" d="M223.094,234.499v-0.022c0-1.166,1.001-1.826,2.453-1.826c0.781,0,1.32,0.099,1.859,0.242v-0.242
68
    c0-1.133-0.693-1.716-1.849-1.716c-0.682,0-1.243,0.187-1.76,0.451l-0.198-0.474c0.616-0.286,1.221-0.484,1.991-0.484
69
    c0.759,0,1.364,0.209,1.771,0.616c0.374,0.374,0.571,0.892,0.571,1.585v3.498h-0.527v-0.936c-0.386,0.539-1.078,1.067-2.146,1.067
70
    C224.216,236.259,223.094,235.665,223.094,234.499z M227.417,234.025v-0.638c-0.473-0.121-1.101-0.253-1.903-0.253
71
    c-1.188,0-1.849,0.527-1.849,1.309v0.022c0,0.814,0.771,1.287,1.629,1.287C226.438,235.753,227.417,235.049,227.417,234.025z"/>
72
  <path fill="#D7F073" d="M229.023,230.517h0.627l2.123,5.005l2.146-5.005h0.605l-2.52,5.654h-0.462L229.023,230.517z"/>
73
  <path fill="#D7F073" d="M235.92,228.315h0.671v0.737h-0.671V228.315z M235.987,230.517h0.539v5.61h-0.539V230.517z"/>
74
  <path fill="#D7F073" d="M238.616,230.517h0.539v1.045c0.374-0.66,1.001-1.178,2.024-1.178c1.419,0,2.244,0.969,2.244,2.311v3.433
75
    h-0.539v-3.333c0-1.155-0.649-1.915-1.782-1.915c-1.101,0-1.947,0.836-1.947,2.003v3.245h-0.539V230.517z"/>
76
  <path fill="#D7F073" d="M245.259,237.051l0.319-0.439c0.671,0.517,1.441,0.792,2.266,0.792c1.288,0,2.201-0.737,2.201-2.179v-0.813
77
    c-0.484,0.692-1.232,1.298-2.344,1.298c-1.354,0-2.695-1.034-2.695-2.641v-0.021c0-1.617,1.342-2.663,2.695-2.663
78
    c1.122,0,1.881,0.595,2.344,1.255v-1.122h0.539v4.741c0,0.814-0.265,1.452-0.716,1.903c-0.483,0.484-1.21,0.748-2.035,0.748
79
    C246.899,237.909,246.03,237.623,245.259,237.051z M250.078,233.058v-0.022c0-1.298-1.155-2.134-2.321-2.134
80
    c-1.177,0-2.167,0.813-2.167,2.123v0.022c0,1.265,1.012,2.145,2.167,2.145C248.922,235.191,250.078,234.334,250.078,233.058z"/>
81
  <path fill="#D7F073" d="M252.112,235.423l0.319-0.429c0.616,0.473,1.298,0.736,2.013,0.736c0.76,0,1.354-0.418,1.354-1.066v-0.022
82
    c0-0.66-0.704-0.902-1.485-1.122c-0.913-0.264-1.925-0.539-1.925-1.54v-0.022c0-0.901,0.759-1.551,1.848-1.551
83
    c0.671,0,1.431,0.242,1.991,0.616l-0.286,0.451c-0.517-0.342-1.133-0.562-1.727-0.562c-0.771,0-1.276,0.418-1.276,0.979v0.021
84
    c0,0.627,0.759,0.858,1.562,1.09c0.901,0.253,1.848,0.583,1.848,1.573v0.021c0,1.001-0.857,1.64-1.936,1.64
85
    C253.597,236.237,252.706,235.907,252.112,235.423z"/>
86
</g>
87
<path fill="#FFFFFF" d="M297.813,187.789c-0.414,0-0.75-0.336-0.75-0.75V41.398c0-0.689-0.561-1.25-1.25-1.25H61.049
88
  c-0.689,0-1.25,0.561-1.25,1.25v145.641c0,0.414-0.336,0.75-0.75,0.75s-0.75-0.336-0.75-0.75V41.398c0-1.517,1.234-2.75,2.75-2.75
89
  h234.764c1.516,0,2.75,1.233,2.75,2.75v145.641C298.563,187.453,298.227,187.789,297.813,187.789z M327.25,187.977
90
  c0-0.414-0.336-0.75-0.75-0.75H30.363c-0.414,0-0.75,0.336-0.75,0.75c0,10.002,8.137,18.139,18.138,18.139h261.367
91
  C319.116,206.115,327.25,197.979,327.25,187.977z M325.733,188.727c-0.394,8.828-7.696,15.889-16.615,15.889H47.75
92
  c-8.923,0-16.228-7.061-16.621-15.889H325.733z"/>
93
<g>
94
  
95
    <line class="dash" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="84.662" y1="168.215" x2="84.662" y2="140.473"/>
96
  
97
      <line class="dash" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="105.592" y1="168.215" x2="105.592" y2="149.795"/>
98
  
99
   <line class="dash three" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="126.523" y1="168.215" x2="126.523" y2="159.118"/>
100
  
101
  <line class="dash four" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="147.453" y1="168.215" x2="147.453" y2="140.473"/>
102
  
103
  <line class="dash five" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="168.382" y1="168.215" x2="168.382" y2="149.795"/>
104
  
105
  
106
    <line class="dash six" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="189.313" y1="168.215" x2="189.313" y2="140.473"/>
107
  
108
  <line class="dash seven" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="210.244" y1="168.215" x2="210.244" y2="135.812"/>
109
  
110
    <line class="dash eight" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="231.173" y1="168.215" x2="231.173" y2="163.779"/>
111
  
112
      <line class="dash nine" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="252.104" y1="168.215" x2="252.104" y2="154.457"/>
113
  
114
    <line class="dash ten" fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="272.201" y1="168.215" x2="272.201" y2="163.779"/>
115
116
  
117
  
118
</g>
119
<polyline fill="none" points="84.295,72.647 104.795,97.147 147.795,75.147 189.295,110.647 231.795,102.147 270.795,122.147 "/>
120
<polyline class="zigzag" fill="none" stroke="#AFCA5D" stroke-width="5" stroke-miterlimit="10" points="84.295,72.647 104.795,97.147 
121
  147.795,75.147 189.295,110.647 231.795,102.147 270.795,122.147 "/>
122
</svg>
123
124
</div>
!

CSS

xxxxxxxxxx
64
 
1
.bg {
2
  background:#799d4b;
3
  text-align:center;
4
  padding:50px;
5
}
6
7
.zigzag {
8
  stroke-dasharray: 480;
9
  stroke-dashoffset: 480;
10
  animation: zigzag 4s linear forwards infinite;
11
}
12
@keyframes zigzag {
13
  from {
14
    stroke-dashoffset: 980;
15
  }
16
  to {
17
    stroke-dashoffset: 0;
18
  }
19
}
20
21
.dash {
22
  stroke-dasharray: 280;
23
  stroke-dashoffset: 280;
24
  animation: month 4s linear backwards infinite;
25
  &:nth-child(1) {
26
    animation-delay: 0s;
27
  }
28
  &:nth-child(2) {
29
    animation-delay: 0.05s;
30
  }
31
  &:nth-child(3) {
32
    animation-delay: 0.10s;
33
  }
34
  &:nth-child(4) {
35
    animation-delay: 0.15s;
36
  }
37
  &:nth-child(5) {
38
    animation-delay: 0.20s;
39
  }
40
  &:nth-child(6) {
41
    animation-delay: 0.25s;
42
  }
43
  &:nth-child(7) {
44
    animation-delay: 0.30s;
45
  }
46
  &:nth-child(8) {
47
    animation-delay: 0.35s;
48
  }
49
  &:nth-child(9) {
50
    animation-delay: 0.40s;
51
  }
52
  &:nth-child(10) {
53
    animation-delay: 0.45s;
54
  }
55
}
56
@keyframes month {
57
  from {
58
    stroke-dashoffset: 380;
59
  }
60
  to {
61
    stroke-dashoffset: 0;
62
  }
63
}
64
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

1
 
1
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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