-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (133 loc) · 8.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.st0{fill:#F39800;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#22AC38;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.svg{
border: 1px solid pink;
}
.svg:hover .base-path{
transform: scale(1.1);
transition: all 0.5s ease-in;
}
.svg:hover .loading-path{
stroke-dasharray: 485;
/*460,24;*/
/*62,180;*/
animation: wistia_dash 0.5s linear forwards;
/*infinite*/
}
@keyframes wistia_dash {
0%{
stroke-dashoffset: 485;
/*484;*/
}
100%{
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" class="svg">
<!--<path d="M0,0 20,-70 40,-80 70,-60 70,-40 " stroke="#cd0000" stroke-width="1" fill="#123456">-->
<!--</path>-->
<!--<path id="XMLID_1_" d="M5.9-2.1C-11.7-14.4,15.1-75.3,21-88.8c8.8-19.9,16.4-29.2,27.2-34.3c14.6-6.9,29.2-3.4,32.8-2.5-->
<!--c5.9,1.5,20.7,5.2,27.7,18.7c6,11.4,3,23.2,1.5,28.7C106.2-63,96.1-52.3,78.5-38.8C46.6-14.5,18.6,6.8,5.9-2.1z" fill="#FF8500" transform="scale(0.1)">-->
<!--<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="10s" rotate="auto" repeatCount="indefinite"/>-->
<!--</path>-->
<!--<path id="XMLID_218_" class="st0" d="M5.9-2.1C-11.7-14.4,15.1-75.3,21-88.8c2.8-6.3,5.4-11.5,8.1-15.8c5.8-9.5,11.7-14.9,19.1-18.4-->
<!--c14.6-6.9,29.2-3.4,32.8-2.5c5.9,1.5,20.7,5.2,27.7,18.7c6,11.4,3,23.2,1.5,28.7C106.2-63,96.1-52.3,78.5-38.8-->
<!--C46.6-14.5,18.6,6.8,5.9-2.1z" transform="scale(0.2)">-->
<!--<animateMotion path="M80.7,142.3c-20.9,19.7-30,50.5-23.4,78.4c3.6,15.1,11.2,27.5,25.7,34c15.6,7,33.8,10.9,50.9,11.8-->
<!--c29.5,1.6,62.8-10.7,73.8-40.4c5.4-14.6,4.9-31.7,1.9-46.7c-2.7-13.5-8.5-27-18.9-36.4c-13.4-12.1-31.9-14.5-49.2-14.5-->
<!--c-21,0-41.8,3.9-61.3,11.5c-3,1.1-1.7,6,1.3,4.8c15.4-5.9"-->
<!--begin="0s" dur="3s" />-->
<!--<animateMotion path="M92.7,138.4c-8.9-15.9-18.5-31.7-25.9-48.4c-3.7-8.5-6.8-17.3-8.5-26.4c-1.2-6.3-5-26.6,4.9-27.2-->
<!--c8.6-0.5,15.3,10.8,18.5,17.4c3.6,7.5,5.6,15.6,7.5,23.6c4.4,19,8.7,38,13.1,57c0.7,3.1,5.5,1.8,4.8-1.3"-->
<!--begin="3s" dur="2s" />-->
<!--<animateMotion path="M173.8,133.7c-0.1-18,1.2-35.9,4.4-53.7c1.5-8.6,3.4-17.2,5.7-25.7c1.5-5.5,4.1-21.9,13-19-->
<!--c9.2,3,6.9,18.1,6.6,25.4c-0.4,9-1.4,17.9-2.9,26.7c-3,17.3-8.2,34.2-15.1,50.3c-1.3,2.9,3,5.5,4.3,2.5-->
<!--c6.5-15.1,11.6-30.8"-->
<!--begin="5s" dur="2s" />-->
<!--<animateMotion path="M94.5,184.1c0.4,3,0.6,6.8,1.9,9.6c1,2.3,4.3,3.2,5.5,0.5c1.1-2.3,1.2-6.1,0.7-8.6c-0.5-2.6-2-4.8-4.3-6.2-->
<!--c-2.7-1.7-5.3,2.6-2.5,4.3c2.7,1.7,2.4,6.3"-->
<!--begin="7s" dur="1s" />-->
<!--<animateMotion path="M160.5,180.5c-0.2,3.6-1.7,15.1,4.9,14c5.6-0.9,3-11.3,2-14.7c-0.9-3.1-5.8-1.8-4.8,1.3-->
<!--c0.4,1.4,0.8,2.9,1,4.4c0.1,0.4-0.1,4.4,0.1"-->
<!--begin="8s" dur="1s" />-->
<!--<animateMotion path="M118.8,228.8c3,0.2,7.3,1.5,10.1,0.3c2.3-1,2.5-3.5,4.3-5c-1.4-0.6-2.8-1.2-4.3-1.8-->
<!--c0.6,5.8,6,7.5,11.2,7.4c3-0.1,11.5-1.3,8-6.4c-1.8-2.6-6.1-0.1-4.3"-->
<!--begin="9s" dur="1.5s" />-->
<!--</path>-->
<!--<path id="XMLID_219_" class="st1" d="M113.7-119.3c-3.8-0.3-15.8-1.6-26.2-10.8c-1.9-1.7-6.6-5.9-9.7-12.5-->
<!--c-8.9-19.1,1.2-44.4,7.4-44.5c4.6,0,8.6,13.6,9.1,15.4c2.9,10,1.4,17.2,3.4,17.7c2,0.5,3.8-6.3,10.3-13.7c5.3-6,14.6-13.6,18.2-11.4-->
<!--c3.8,2.3,1.1,15.4-2.3,24c-3.1,7.6-6.6,11.3-5.1,13.1c1.7,2.2,7.9-1.6,17.7-3.4c9.3-1.8,24.3-2.2,25.7,1.7-->
<!--C164.3-138,139.9-116.9,113.7-119.3z" transform="scale(0.2)">-->
<!--<animateMotion path="M80.7,142.3c-20.9,19.7-30,50.5-23.4,78.4c3.6,15.1,11.2,27.5,25.7,34c15.6,7,33.8,10.9,50.9,11.8-->
<!--c29.5,1.6,62.8-10.7,73.8-40.4c5.4-14.6,4.9-31.7,1.9-46.7c-2.7-13.5-8.5-27-18.9-36.4c-13.4-12.1-31.9-14.5-49.2-14.5-->
<!--c-21,0-41.8,3.9-61.3,11.5c-3,1.1-1.7,6,1.3,4.8c15.4-5.9"-->
<!--begin="0s" dur="3s" />-->
<!--<animateMotion path="M92.7,138.4c-8.9-15.9-18.5-31.7-25.9-48.4c-3.7-8.5-6.8-17.3-8.5-26.4c-1.2-6.3-5-26.6,4.9-27.2-->
<!--c8.6-0.5,15.3,10.8,18.5,17.4c3.6,7.5,5.6,15.6,7.5,23.6c4.4,19,8.7,38,13.1,57c0.7,3.1,5.5,1.8,4.8-1.3"-->
<!--begin="3s" dur="2s" />-->
<!--<animateMotion path="M173.8,133.7c-0.1-18,1.2-35.9,4.4-53.7c1.5-8.6,3.4-17.2,5.7-25.7c1.5-5.5,4.1-21.9,13-19-->
<!--c9.2,3,6.9,18.1,6.6,25.4c-0.4,9-1.4,17.9-2.9,26.7c-3,17.3-8.2,34.2-15.1,50.3c-1.3,2.9,3,5.5,4.3,2.5-->
<!--c6.5-15.1,11.6-30.8"-->
<!--begin="5s" dur="2s" />-->
<!--<animateMotion path="M94.5,184.1c0.4,3,0.6,6.8,1.9,9.6c1,2.3,4.3,3.2,5.5,0.5c1.1-2.3,1.2-6.1,0.7-8.6c-0.5-2.6-2-4.8-4.3-6.2-->
<!--c-2.7-1.7-5.3,2.6-2.5,4.3c2.7,1.7,2.4,6.3"-->
<!--begin="7s" dur="1s" />-->
<!--<animateMotion path="M160.5,180.5c-0.2,3.6-1.7,15.1,4.9,14c5.6-0.9,3-11.3,2-14.7c-0.9-3.1-5.8-1.8-4.8,1.3-->
<!--c0.4,1.4,0.8,2.9,1,4.4c0.1,0.4-0.1,4.4,0.1"-->
<!--begin="8s" dur="1s" />-->
<!--<animateMotion path="M118.8,228.8c3,0.2,7.3,1.5,10.1,0.3c2.3-1,2.5-3.5,4.3-5c-1.4-0.6-2.8-1.2-4.3-1.8-->
<!--c0.6,5.8,6,7.5,11.2,7.4c3-0.1,11.5-1.3,8-6.4c-1.8-2.6-6.1-0.1-4.3"-->
<!--begin="9s" dur="1.5s" />-->
<!--</path>-->
<path d="M80.7,142.3c-20.9,19.7-30,50.5-23.4,78.4c3.6,15.1,11.2,27.5,25.7,34c15.6,7,33.8,10.9,50.9,11.8
c29.5,1.6,62.8-10.7,73.8-40.4c5.4-14.6,4.9-31.7,1.9-46.7c-2.7-13.5-8.5-27-18.9-36.4c-13.4-12.1-31.9-14.5-49.2-14.5
c-21,0-41.8,3.9-61.3,11.5c-3,1.1-1.7,6,1.3,4.8c15.4-5.9"
fill="none"
stroke="#dddddd"
style="stroke-width: 2px;"
class="base-path"/>
<path d="M80.7,142.3c-20.9,19.7-30,50.5-23.4,78.4c3.6,15.1,11.2,27.5,25.7,34c15.6,7,33.8,10.9,50.9,11.8
c29.5,1.6,62.8-10.7,73.8-40.4c5.4-14.6,4.9-31.7,1.9-46.7c-2.7-13.5-8.5-27-18.9-36.4c-13.4-12.1-31.9-14.5-49.2-14.5
c-21,0-41.8,3.9-61.3,11.5c-3,1.1-1.7,6,1.3,4.8c15.4-5.9" class="loading-path base-path"
id="circle"
stroke-miterlimit="2"
fill="none"
stroke="#333333"
style="stroke-width: 2px;"/>
<!--三角形loading！好看！！！！！！！！！！！！！！！！！！！！！！！-->
<!--d="M32,21 L81,40 L52,60 Z"-->
<!--<circle id="circle" stroke-miterlimit="20" cx="100" cy="50" r="40" stroke="black"-->
<!--stroke-width="2" fill="none"-->
<!--class="loading-path"/>-->
<!--<path d="M92.7,138.4c-8.9-15.9-18.5-31.7-25.9-48.4c-3.7-8.5-6.8-17.3-8.5-26.4c-1.2-6.3-5-26.6,4.9-27.2-->
<!--c8.6-0.5,15.3,10.8,18.5,17.4c3.6,7.5,5.6,15.6,7.5,23.6c4.4,19,8.7,38,13.1,57c0.7,3.1,5.5,1.8,4.8-1.3-->
<!--c-4.1-17.9-8.2-35.8-12.3-53.7c-3.2-13.9-6.7-28.7-16.4-39.7c-4-4.5-9.5-8.9-15.9-8.3c-5.9,0.5-9.4,4.7-10.2,10.3-->
<!--c-2.1,16,2.5,32.6,8.6,47.2c7.6,18.1,17.9,34.9,27.4,52C89.9,143.7,94.2,141.2,92.7,138.4L92.7,138.4z"/>-->
<!--<path d="M173.8,133.7c-0.1-18,1.2-35.9,4.4-53.7c1.5-8.6,3.4-17.2,5.7-25.7c1.5-5.5,4.1-21.9,13-19-->
<!--c9.2,3,6.9,18.1,6.6,25.4c-0.4,9-1.4,17.9-2.9,26.7c-3,17.3-8.2,34.2-15.1,50.3c-1.3,2.9,3,5.5,4.3,2.5-->
<!--c6.5-15.1,11.6-30.8,14.8-47c3-15.2,5.6-32.1,4-47.6c-0.6-5.8-2.9-11.6-8.3-14.4c-4.9-2.6-10.4-1.1-13.8,3c-4,4.8-5.4,11.9-7,17.8-->
<!--c-2.2,8.2-4.1,16.4-5.6,24.8c-3.4,18.7-5,37.8-4.9,56.8C168.8,136.9,173.8,136.9,173.8,133.7L173.8,133.7z"/>-->
<!--<path d="M94.5,184.1c0.4,3,0.6,6.8,1.9,9.6c1,2.3,4.3,3.2,5.5,0.5c1.1-2.3,1.2-6.1,0.7-8.6c-0.5-2.6-2-4.8-4.3-6.2-->
<!--c-2.7-1.7-5.3,2.6-2.5,4.3c2.7,1.7,2.4,6.3,1.4,8.9c0.6-0.6,1.2-1.2,1.7-1.7c-0.1,0-0.3,0.1-0.4,0.1c0.8,0.2,1.6,0.4,2.4,0.6-->
<!--c-0.7-0.6-0.8-3.4-0.9-4.3c-0.3-1.5-0.5-3-0.7-4.5C98.9,179.6,94,181,94.5,184.1L94.5,184.1z"/>-->
<!--<path d="M160.5,180.5c-0.2,3.6-1.7,15.1,4.9,14c5.6-0.9,3-11.3,2-14.7c-0.9-3.1-5.8-1.8-4.8,1.3-->
<!--c0.4,1.4,0.8,2.9,1,4.4c0.1,0.4-0.1,4.4,0.1,4.5c0.6-0.3,1.3-0.5,1.9-0.8c0-0.4,0-0.9-0.1-1.3c0-0.7,0-1.5,0-2.2-->
<!--c0-1.7,0-3.5,0.1-5.2C165.7,177.2,160.7,177.2,160.5,180.5L160.5,180.5z"/>-->
<!--<path d="M118.8,228.8c3,0.2,7.3,1.5,10.1,0.3c2.3-1,2.5-3.5,4.3-5c-1.4-0.6-2.8-1.2-4.3-1.8-->
<!--c0.6,5.8,6,7.5,11.2,7.4c3-0.1,11.5-1.3,8-6.4c-1.8-2.6-6.1-0.1-4.3,2.5c0.9-1.7,0.5-2.2-1.2-1.4c-1.1,0.3-2.3,0.4-3.5,0.3-->
<!--c-1.6,0-5-0.3-5.3-2.4c-0.2-2.2-2.5-3.2-4.3-1.8c-1.1,0.9-1.5,3-2.6,3.7c-1.5,1.1-6.5-0.3-8.3-0.4-->
<!--C115.6,223.5,115.6,228.5,118.8,228.8L118.8,228.8z"/>-->
</svg>
</body>
<script src="main.js"></script>
</html>