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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
| <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>元素转换大法</title>
<script src="https://cdn.bootcdn.net/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
html {
user-select: none;
}
body {
text-align: center;
}
ul {
list-style: none;
margin-top: 30px;
}
li {
display: inline-block;
width: 50px;
height: 50px;
font-size: 30px;
border-radius: 50%;
background-color: lightgray;
margin-right: 30px;
text-align: center;
line-height: 50px;
cursor: pointer;
font-family: 'SimHei', monospace;
box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.6);
}
li:active {
transform: translate(1px, 1px);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
}
li.pyro {
background-color: #ff6641;
}
li.anemo {
background-color: #49f2ac;
}
li.geo {
background-color: #efd458;
}
li.hydro {
background-color: #05e6ff;
}
li.cryo {
background-color: #8fccd9;
}
li.electro {
background-color: #fca7ff;
}
li.dendro {
background-color: #a4e829;
}
svg {
width: 500px;
height: 500px;
margin-top: 20px;
}
path {
fill: url(#bg);
}
</style>
</head>
<body>
<ul>
<li class="pyro">火</li>
<li class="anemo">风</li>
<li class="geo">岩</li>
<li class="hydro">水</li>
<li class="cryo">冰</li>
<li class="electro">雷</li>
<li class="dendro">草</li>
</ul>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 400 400">
<linearGradient id="bg" gradientUnits="userSpaceOnUse" x1="200" y1="400" x2="200" y2="0">
<stop id="bg-stop-1" offset="0"/>
<stop id="bg-stop-2" offset="1"/>
</linearGradient>
<path id="path" d=""/>
</svg>
<script>
const elemental = {
pyro: {
path: `M195.9,20.9C179.1,97.2,87.5,139,211.9,185.8c91.8,22,86.2,142-19.6,126
c-31.7-5.3-33.3-42.6-9.8-57.7c-77.7-21.4-48.4,98.3,65.7,62c56.5-16.3,78-67,55.4-115c18,11.3,35.8,30.1,31.1,53.7
c-14.8,46.7-94,64-131.7,98.7c-50.4-39.2-204.9-81.4-98-158.9c-63.4,68.8,52.6,123.8,29.1,100.9c-37.9-45,11.1-108.6,66.9-106.6
c2.4-2.1-27.2-10.8-31.6-15.4c-24.4-13.8-39.2-33.5-39.2-52c0-4.9,0-4.9-2.2-0.8c-22.8,48.1-88.9,93.8-75.2,151.2
c34,48.5,108.7,68.1,148.8,109.6c10.2-2.9,24-21,34.6-26.5c14.1-10.6,39.1-25.3,54-33.5c73.5-34.6,76.5-94.4,14.3-143.1
c-16.7-10.1-36.7-45.6-38.8-63.7c-18.9,12-26.2,48.8-10.5,64.7c4.3,2.6,15.8,24.7,10.6,21.2c-30.1-27.5-43.9-59.3-26.5-103.8
c-25.7,11.8-59.6,54.7-30.7,77.1c-59.8-49.5,40.7-68.2,17.8-112.9C225.3,55.6,197.8,12.2,195.9,20.9 M194.8,207.6
c-16,0.5-41.8,20.3-38.1,31.2c46.6-21.9,78.1,18,61.5,51.9C280.8,274.7,251,198.3,194.8,207.6`,
color1: '#ff6641',
color2: '#ec3634',
},
anemo: {
path: `M257.2,24.2c32.9,53.7,7.5,124.5-39.4,163c-2.9,2.6-2.9,2.7,3.7,1c33.8-8.8,70.6-26,86.2-56.8
C328.2,89.9,303.3,35.4,257.2,24.2 M139.1,25.2c-38.9,12.5-60.3,52-52.5,90.4c6.4,30,32,49.6,62.6,62.8c9.8,4.3,37.7,12.9,35,10.7
c-47.8-37.4-74.9-111.5-41.8-164.5C142.5,24.2,141.7,24.3,139.1,25.2 M63.3,77.2c-25.7,43.9-22.8,97.8,30.7,115.7
c9.6,4.2,31.9,4.8,45.6,9.3c51.8,11.2,79.1,66.8,25.7,86.8c-6.5,3.7-10-1.4-15.8-4.7c-5-0.1-12.2-0.4-14.4,2.7
c25.8,20.7,47.2,51.6,63.2,85.8c2.2,4.3,1.3,3.8,3.5-0.4c13.6-28.9,31.4-56.3,51.8-75.1c-0.1-0.4,5.4-5.6,8.8-8.3
c2.3-1.8,2.5-2,2-2.5c-1.5-2.2-9.6-2.6-13.9-2.2c-5.7,3-9.2,8.4-15.7,4.7c-60.7-24.4-18.3-84.7,42.9-90.6
c55.1-3,88.9-43.7,69.3-97.7c-0.2-0.8-1.2-3.4-1.2-4.2c-0.3-0.1-2.3-5-2.3-5.6c0-0.2-0.1-0.4-0.2-0.4c-0.2,0-1.3-2.6-1.3-3
c-1.7-2.4-1.8-4.5-3.7-7.1c-2.5-4.7-3.2-5.2-3.2-2.2c0.1,1.5-0.9,5.8-1,7.2c-6.9,36.8-24.5,71-58.7,90.1
c-26.1,13.9-70,33.9-74.5,56.3c-0.9,2.8-1,2.8-1.6,0.5c-1.5-14.9-33.8-37-56-47c-14.2-6.3-36.7-19.5-45.8-31.5
c-17.1-18.2-29.7-48.3-33.1-78L63.3,77.2 M27.1,147.6c-5.7,20-7.6,45.7,2.1,63.8c10,21.6,37.5,36.6,59.8,33.2
c12.7-1.8,29.9-7.7,46.5-16c15.3-9.2,32.8-2.5,34.7,11.9c1.6,3.5-1.6,14.5-4.8,15.3c-4,5.1-15.7,7.3-23.2,7.3c-2,0-2-0.2-1.5,3.6
c1.4,12.2,17.1,15.2,26.4,10.7c12.8-5.5,17.4-26.4,11.2-41.7c-7.3-17.5-28.4-27.3-60.6-28.1C74.3,207.6,55.9,187.3,27.1,147.6
M370,151c-10.1,14.9-23.3,30.4-33.5,39c-30,29.9-103,4.3-116.1,48.9c-3.5,13-1.9,28.2,9.1,36.8c11.6,8.8,31.1,1.7,29.9-12.5
c-47.7,1.9-33.2-53.3,4.1-35.1c11.6,6,33.1,14.1,43.6,15.8c44.1,7.2,78.1-32.3,69.4-79.4c-0.5-3.3-0.9-5.4-2.4-11.8
C372.5,146.4,372.9,146.6,370,151 M201.3,281.7c5,9.9,13.4,17.2,23.4,20.1c2.5,0.7,2.5,0.8-0.1,1.5c-9.1,2.6-18.3-0.9-24.7-7.8
c-6.4,6.9-15.6,10.4-24.7,7.8c-2.5-0.7-2.6-0.9-0.3-1.5C197.7,295.7,198.8,272.8,201.3,281.7 M202.1,309.6c4,3.7,8.7,6.4,13.5,8.6
c-26.1,31.7-4.6,34.4-31.3-0.1c4.9-1.8,11.7-6.7,15.6-10.4C200,307.7,200.9,308.5,202.1,309.6`,
color1: '#4bfbb2',
color2: '#49f2ac',
},
geo: {
path: `M198.8,22.6C156.9,52.3,116.6,91,84.3,128.8c-1.6,22.7,18,58.4,27.8,77.3
c24.1-23.3,61.2-65.5,89.9-68.6c23.6,24.2,48.9,41.2,13,65.1c-16.2,16-29.7,17.7-6,37c20-13.5,44.8-34.2,62.1-52
c-11.1-25.9-46.6-71.8-71.2-94c-19.9,14.1-44.5,37-64,53.2c-38.7,32.3,44.4-93.9,64.1-105c53.1,57.8,103.9,134,130,209.4
c41.4-54.4,47.5-43.3,1.8-103C294.3,101.4,249.3,52.3,198.8,22.6 M67.3,151.7c-10,12.3-27.3,36.5-34.3,48.3
c29.8,51.3,77.6,105.6,123.2,144.4c14.9,9.9,33.3,32.7,46.4,31.8c42-30.3,78-64.9,111.6-103.5c6.6-22-18.6-62-26.3-79
c-24.9,26.2-56.5,57.3-87.9,70.3c-16.9-14.2-30.7-31.5-35.9-46.5c12.1-11.7,26.3-25.7,39-36.7c8.3-4-11.2-19.1-12-20.5
c-12.6,7.7-52.8,40.6-62.1,52.2c15.3,31.5,34.5,54.8,57.4,80.2c18.2,20.8,12.8,13.2,33.7-2c15.8-13.3,30.8-26.2,46.6-39.8
c21-21.2-6.4,30.4-12.6,40.1c-18,27.6-29.3,41.2-52,65.1c-3.9,6.4-11.5-10.6-15.9-13c-30.6-35.9-60.5-78.1-83.7-120.7
C90.2,207.5,75.1,149.1,67.3,151.7`,
color1: '#efd458',
color2: '#ba840a',
},
hydro: {
path: `M189.8,27.5C150.5,30,115.1,44.8,85.4,69C69.1,84.1,36.2,115.3,47,137.3
c6.5,13.3,31.5,17.3,39.1,6.3c49-73.8,162.4-80.1,218.6-12.4c55.5,60.4,39.5,166.3-31.4,207.6c94.7-71.1,36.6-237.4-99.4-212.7
c-23.2,4.5-33.3,12.8-33.3,27.1c0,11.4,5.1,19.9,14,23.1c9.6,2.8,17.2-0.9,27.1-2.8C248.5,158.9,311,230,286.8,292.5
c-22.2,65.2-98,75.6-155.1,50.6c-10.5-3.5-21.6-8.4-30.4-13.4c-3.5-2-3.4-2-2.4,0.4c5.1,16.5,35.9,32.6,59.4,37.5
c137.5,34.5,257.9-108.8,199.4-237.9C329.1,64.7,260.2,23.2,189.8,27.5 M46.3,178.4c-39.7,11.2-9.9,68.8,22.5,41.4
C86,203.2,70.1,172.9,46.3,178.4 M191.7,221c-91.3,14.5-56.3,149.4,29.9,119.2c10.5-2.9,29-19.4,30.8-26.9
c-79.8,68.3-130.6-45.2-60.3-53.3c10.5,0,18,6.6,20.3,17.9c3,24.8,38.3,26.5,43.8,3.5C264.6,244.8,225,216.2,191.7,221 M80.8,260.8
c-26.4,3.9-14.7,44.4,9.6,32.5C107.2,285.2,99.4,258.8,80.8,260.8`,
color1: '#05e6ff',
color2: '#0069fe',
},
cryo: {
path: `M198.8,18C185.6,47,168.5,77,150.6,103.8c0,0.5,11-2.6,12.3-3.5c1.9-1.4,2.8-0.8,7.3,4.8
c13.1,16.3,23.5,43.9,28.8,76.1c0.9,5.8,1.1,6.1,1.6,2.6c4.7-29.6,14.2-63.7,34.3-84.5c1.2,0.4,18,7.6,13.5,2.7
C234.5,82.6,213,44,203,21.9C200.3,17.5,200.6,13.1,198.8,18 M202.3,76c20.5,24.1,14.5,1.9,3,41.7c-2.4,5-5.5,32.2-5.9,21.7
c-2.2-16.1-8.4-35.1-15.7-49.9c3.2-1.7,12.1-10.5,15-14.9C200,72.6,199.8,72.5,202.3,76 M40.8,108.7c13.9,18.7,42.2,65.4,50.7,85.4
c1.2,3.5,3.1-10.1,4-14.3c26.5-7.2,66,2.8,91.2,13.1c1.2,0.5,1.9,0.4,1.1-0.2c-1.8-1.4-3.9-3.2-6.3-5.2c-20.9-17.8-44.3-42.1-51-68
c3-2.1,11.3-9.8,11-10.2c-22.7,2.1-79.7,1.2-101.2-1.4L40.8,108.7 M353.9,108.2c-24.3,2.9-71.6,2.7-95.4,1
c-0.3,0.3,7.1,7.4,10.1,9.5c0.6,0.4,1,0.8,1,0.9c-7.1,26-32.6,52.5-57.8,73.5c26.6-10.2,65-20.7,92.6-13.4c0.5,3.7,2.6,13.9,3.3,15
c3.1-4.9,13.8-27.4,17.9-33.6c8.6-15.2,19.8-32.8,29.8-47.3C358.8,108,362.9,107.3,353.9,108.2 M114.3,133.2
c44.4,59.5,53.7,31.7-18.2,25.9c-3.2-31.8-16.9-17.1,13.4-27.2C113.5,130.5,112,129.9,114.3,133.2 M291.7,132.4
c5.7,2.2,12.3,3.6,18.3,4.1c-3.5,7.7-5.5,15.4-6.2,22.7c-13.4-0.3-39,6-53.7,12c13.3-10.6,28.2-26.1,37.3-40.5
C288.7,131.2,289.7,131.6,291.7,132.4 M171.5,151.6c0.2-0.9-2.2,17.5-2.5,21c8.2,8.2,18.8,18.1,26.9,24.5c2.2,1.8,2.3,1.9,1.5,1.4
c-2.6-1.3-31.7-10.1-35.2-10.6c-4.3,0.9-14.4,9.7-16.9,10.9c-0.8,0.6-1.5,1.2-1.6,1.3c0.6,0.9,13.7,10.5,16.8,12.9
c43.4-10.3,47.5-23.9,9.4,14.1c0.3,3.8,1.7,19.6,1.8,21.6c1.4,0.2,18-7.6,19.4-7.8c3.6-9.4,6.4-25,8.7-38.6c1.1,8.2,7,30.7,8.7,37.3
c0,0,1.8,0.8,3.8,1.8c2.8,1.3,15.3,7.4,15.9,7.3c0.7-5.2,2-16.1,2.6-21.3c-7.8-8.1-22.3-20.9-28.4-26c4.8,2,20.4,6.6,28.6,8.8
c4.2,1.2,6.6,1.8,7.2,1.8c-0.1,0.7,17.9-11.8,18-12.4c-0.7-0.7-13.8-10.5-16.9-12.8c-44.1,10.8-46.3,22.8-9.5-14
c-0.4-3.8-1.6-19.6-1.7-21.4c-3.2-0.1-14.3,6-19.8,7.8c-2.8,9.4-7.2,29.6-8,36.1c-0.2,2.2-0.6,2-0.9-0.6c-0.3-3.1-5.9-25.7-7.7-32.5
c-0.5-2-0.5-2-2-2.7C184.2,157.2,169.9,149.8,171.5,151.6 M87,214.9c-12.5,25.4-29.9,53.3-45.5,75.2c-1.6,2.2-1.9,2.1,5,1.5
c20.5-2.2,70.2-3.1,92.6-0.9c7,1.6-7.9-9.3-8.7-10.2c-0.3-0.2,0.7-3.7,2.1-7.3c9.6-24.2,33.1-48.4,54.6-65.5
c-28.2,9.2-69.5,19.9-91.7,12.4c-0.5-4.1-2.8-15.1-3.4-15.1C92,205.2,89.7,209.5,87,214.9 M307.3,206.1c-0.8,2.3-2.3,10.2-2.9,14.1
c-22.7,7-61.8-2.2-92.3-12.9c21.7,16.8,44.2,41.6,52.7,60.4c8.5,18.5,3.8,10.1-6.3,23c14.7-0.4,19-1.4,41.5-1.1
c24.4-0.2,38.3,0.9,53.6,2.1c6.3,0.6,6.6,0.5,4.8-1.5c-0.4-0.3-6-8.6-6.3-9c-14.4-21.1-30.6-48.3-40.7-69.1
C307.8,204.6,307.9,204.7,307.3,206.1 M199.5,215.1c-4.9,31.3-14.5,64.8-34.4,85.5c-3.6-1.7-13.8-4.9-14.6-4.6
c2.8,5.2,8.9,13,15.2,23.7c11.2,18.4,24.6,43.5,33.1,62.3c1.1,2.5,1.3,2.6,1.9,1.1c2.6-6.2,14-28.9,18.4-36.9
c7.7-14.1,16-28.4,25.7-42.9c4.6-7,5.1-7.8,4.1-7.4c-3.4,0.9-10.5,3.1-14,4.7c-17.2-18-25.9-43.6-31.7-70
C201.7,225.7,200.4,209.4,199.5,215.1 M150,228.9c-11.7,8.9-28.3,26.1-36.3,38.9c-0.9,1.3-1.1,1.5-1.7,1.3
c-32.4-11.9-19.5,4-15.9-28C114.4,239.9,135,234.8,150,228.9 M255.5,230.8c15.5,5.8,31.6,9,48.4,10.2c4.7,34.6,15.5,15.3-16.5,28.3
c-7.5-13.2-25.7-30.9-36.9-40.4C250.8,229.1,253,229.9,255.5,230.8 M200.4,259.6c1.5,11.3,5.2,25.7,9.8,37.2
c1.7,4.4,1.9,4.7,4.3,9.9c1.6,3.5,1.7,3.8,1.2,4.1c-26.2,20.5-5.7,20.6-31.6,0.1c-0.6-0.4-0.6-0.5,1-4c6.8-14.4,12.3-32.5,14.1-46.3
C199.9,257.1,200.1,256.8,200.4,259.6`,
color1: '#a5ffff',
color2: '#8fccd9',
},
electro: {
path: `M200.2,26c18.2,9.2,34.2,18.3,50,31.4c49,36,49.2,107-4.7,130c-56.9,23.3-111.1-64.3-36.5-73.8
c-46.6-39.2-101.8-25.3-144.4,20.7c1.4-21.5,10.9-43.2,29.7-70.8c1.7-2.5,1.1-2.4-2.3,0.4c-47,36.6-72.3,99.2-64,159.2
c2.2,20.3,11.9,47.7,22.2,64.7c0.4,0.4,0.4-1,0-7.8c-15.1-157.6,144-156.9,137.2-58.7c-4.3,32.9-44.2,48.9-64.2,16.1
c-15.9,56.3,34,103.1,89.1,113.3c-19.5,10.9-56.6,12.3-77.8,9.6c40.8,20.8,105.5,17.7,149.1-6.9c25.4-12.6,56.9-43.3,68.5-67.1
c-21.7,13.7-42.3,25.3-62.9,30.9c-69.7,27.5-136.9-59.2-77.7-108c32.7-27.3,81.8-2.1,61,38.7c-1.3,2.2-1.1,2.2,2.9,0.6
c55.9-20.5,68-82.3,50.5-133.8c19.5,13.1,33.1,33.6,44,55.7c3.7,7.5,4.1,8,3.6,4.3C363.1,91,282.8,22.5,200.2,26`,
color1: '#fca7ff',
color2: '#7a519a',
},
dendro: {
path: `M197,26.3c-26.5,25.2-36.8,69.2,0,89.2c38-7.7,40.2-54.8,6.4-88.7C199.7,22.7,200.1,22.7,197,26.3
M34.1,94.3c-2.9,0.6-5.5-0.5-4.6,2.8c4.2,34.9,20.5,45.2,45.7,42.3c-13.6,16.5-21.9,49.3-18.5,74.1c-11.2-11.3-24.7-9.1-37.4,6.9
c-9.4,6.4,29.5,24.6,38.5,1.1c1.8,7.2,3.7,15,7,21.7c28.8,67.4,109.2,58.5,133.8,131c1.3,3.6,1.2,3.6,2.7-0.1
c19-52.3,52.8-55.7,90.1-82c26.2-14.9,45.7-45.4,51.1-70.3c7,14,21,15.7,38.1,4c3-2,3-1.7,0.5-4.9c-12.6-16.4-26.7-18.9-37.9-7.2
c2.9-22.4-2.8-55.5-18.5-74.5c27.8,5.4,43.9-14.1,45.9-44.2c-24.2-5.5-58,4.8-53.1,35.9c-17.5-17.2-43.7-27.7-64-25.4
c-30,4.8-66.9,22.6-37.3,44.3c2.6,1.8,2.4,1.9,3.7-1.2c4.3-9.8,13.6-16.9,23.2-19c93.4-18.1,102.2,121,21,147.1
c-28.8,13.1-51.4,22.8-64.1,45.8c-11.6-26.9-58.4-41.1-82.1-55.2C81.5,243.1,69,195,89.2,157.4c13.2-31.8,77.7-41.7,90.8-9.1
c2.7,9.1,23.2-15.2,10.9-23.4c-29.4-28.6-80.4-23.4-108.3,6C84.2,104.6,67.8,91,34.1,94.3 M139.5,149.3
c-38.4,1.9-49.2,43.6-21.7,70.3c-10.5,0.4-18.4,5.2-20.3,14.9c-0.8,3.6-0.8,3.7,0.8,2.3c12.5-13.4,42.7,1.4,61.6,14.7
c7.9,4.3,26.6,15.2,19.5,9c-31.6-23.1-67.7-90.3-8-92.2c5.1,0,5,0.3,2.8-4.1C168.7,153.4,156.6,148.2,139.5,149.3 M248.7,149.5
c-8.9-1.7-34,20.1-20.1,18.8c60.4,3.2,23.2,68.8-8.1,92.2c-3,2.6-2.4,2.6,3.4-0.3c21-10.2,59.6-41,77.3-23.7c1.8,1.7,2,1.3,1.2-2.6
c-1.6-8.8-10-13.9-20.1-14.3C314.1,189.5,292.6,142.5,248.7,149.5`,
color1: '#a4e829',
color2: '#06ac2e',
},
}
let curEleName = 'cryo'
const setup = function () {
let tweenShape
let tweenColor1
let tweenColor2
const $path = document.querySelector('#path')
const $bgStop1 = document.querySelector('#bg-stop-1')
const $bgStop2 = document.querySelector('#bg-stop-2')
const curEle = elemental[curEleName]
$path.setAttribute('d', curEle.path)
$bgStop1.setAttribute('stop-color', curEle.color1)
$bgStop2.setAttribute('stop-color', curEle.color2)
const $ul = document.querySelector('ul')
$ul.onclick = function (e) {
let $ul_ = e.target.closest('ul')
if (!$ul_) return
if (!$ul.contains($ul_)) return
const newEleName = e.target.className
const newEle = elemental[newEleName]
if (newEle) {
tweenShape = gsap.timeline({ paused: true })
.to($path, {
duration: 0.6,
ease: 'back.inOut(1)',
morphSVG: newEle.path,
}
)
tweenColor1 = gsap.timeline({ paused: true })
.to($bgStop1, {
duration: 0.6,
stopColor: newEle.color1,
})
tweenColor2 = gsap.timeline({ paused: true })
.to($bgStop2, {
duration: 0.6,
stopColor: newEle.color2,
})
tweenShape.play()
tweenColor1.play()
tweenColor2.play()
curEleName = newEleName
}
}
}
setup()
</script>
</body>
</html>
|
