-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdouyin.html
358 lines (291 loc) · 11.6 KB
/
douyin.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
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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS Glitch Effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Press+Start+2P'>
<style>
body {
background-color: #000;
}
#container {
width: 70vw;
margin: 10vw auto;
}
.douyin {
text-align: center;
fill: #fff;
font-size: 5em;
letter-spacing: 8px;
font-family: 'Press Start 2P';
font-weight: 400;
/*Create overlap*/
margin: 0;
line-height: 0;
/*Animation*/
animation: glitch1 3s infinite;
}
.douyin1 {
fill: #25f4ee;
animation: glitch2 3s infinite;
}
.douyin2 {
fill: #fe2c55;
animation: glitch3 3s infinite;
}
/*Keyframes*/
@keyframes glitch1 {
0% {
transform: none;
opacity: 1;
}
7% {
transform: skew(-2.5deg, -0.9deg);
filter: url(#filter);
opacity: 0.75;
}
8% {
filter: none;
}
10% {
transform: none;
opacity: 1;
}
27% {
transform: none;
opacity: 1;
}
30% {
transform: skew(1.8deg, -0.1deg);
filter: url(#filter);
opacity: 0.75;
}
31% {
filter: none;
}
35% {
transform: none;
opacity: 1;
}
52% {
transform: none;
opacity: 1;
}
55% {
transform: skew(-1deg, 1.2deg);
filter: url(#filter);
opacity: 0.75;
}
56% {
filter: none;
}
60% {
transform: none;
opacity: 1;
}
72% {
transform: none;
opacity: 1;
}
75% {
transform: skew(0.4deg, -1deg);
filter: url(#filter);
opacity: 0.75;
}
76% {
filter: none;
}
80% {
transform: none;
opacity: 1;
}
100% {
transform: none;
opacity: 1;
}
}
@keyframes glitch2 {
0% {
transform: none;
opacity: 0.25;
}
7% {
transform: translate(-4px, -6px);
filter: url(#filter);
opacity: 0.5;
}
8% {
filter: none;
}
10% {
transform: none;
opacity: 0.25;
}
27% {
transform: none;
opacity: 0.25;
}
30% {
transform: translate(-7px, -4px);
filter: url(#filter);
opacity: 0.5;
}
31% {
filter: none;
}
35% {
transform: none;
opacity: 0.25;
}
52% {
transform: none;
opacity: 0.25;
}
55% {
transform: translate(-5px, -2px);
filter: url(#filter);
opacity: 0.5;
}
56% {
filter: none;
}
60% {
transform: none;
opacity: 0.25;
}
72% {
transform: none;
opacity: 0.25;
}
75% {
transform: translate(-4px, -6px);
filter: url(#filter);
opacity: 0.5;
}
76% {
filter: none;
}
80% {
transform: none;
opacity: 0.25;
}
100% {
transform: none;
opacity: 0.25;
}
}
@keyframes glitch3 {
0% {
transform: none;
opacity: 0.25;
}
7% {
transform: translate(4px, 6px);
filter: url(#filter);
opacity: 0.5;
}
8% {
filter: none;
}
10% {
transform: none;
opacity: 0.25;
}
27% {
transform: none;
opacity: 0.25;
}
30% {
transform: translate(7px, 4px);
filter: url(#filter);
opacity: 0.5;
}
31% {
filter: none;
}
35% {
transform: none;
opacity: 0.25;
}
52% {
transform: none;
opacity: 0.25;
}
55% {
transform: translate(5px, 2px);
filter: url(#filter);
opacity: 0.5;
}
56% {
filter: none;
}
60% {
transform: none;
opacity: 0.25;
}
72% {
transform: none;
opacity: 0.25;
}
75% {
transform: translate(4px, 8px);
filter: url(#filter);
opacity: 0.5;
}
76% {
filter: none;
}
80% {
transform: none;
opacity: 0.25;
}
100% {
transform: none;
opacity: 0.25;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="container">
<svg width="500" height="300">
<defs>
<svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128">
<path
d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28"
p-id="2917"></path>
</svg>
<svg id="douyintext" t="1570367009503" class="icon" viewBox="0 0 1776 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="6608" width="128" height="128">
<path
d="M0 0h1.556078L0 1.556078V0zM337.819608 206.607059c23.692549 0 47.385098-0.050196 71.127843-0.100392-0.200784 36.191373 0.050196 72.432941-0.150588 108.624313 22.387451 0.301176 44.774902 0.301176 67.162353 0.301177 0.301176 23.642353 0.401569 47.284706-0.150589 70.927059-22.337255 1.907451-44.724706 1.606275-67.112156 1.606274 0.401569 42.917647-0.200784 85.88549 0.401568 128.853334 22.738824-6.876863 45.377255-14.406275 68.668236-19.225099 0.100392 24.746667-2.258824 49.392941-2.007844 74.189804-22.136471 6.927059-44.423529 13.201569-66.81098 19.275295 2.108235 44.122353-4.467451 87.993725-0.803137 131.915294-1.15451 74.49098-72.533333 135.68-145.66902 131.614117 0.150588-23.090196 0.25098-46.180392-0.100392-69.320784 36.291765 0.752941 74.49098-23.190588 76.448627-62.042353-0.652549-36.643137-1.857255-73.336471-0.903529-109.979608-25.298824 5.320784-49.694118 14.305882-74.992941 19.827451-0.501961-25.298824-0.501961-50.647843 0.552157-75.89647 25.6-3.262745 49.643922-12.8 74.290196-19.927844 0.25098-49.493333-0.752941-98.986667 0.702745-148.48-25.098039-4.618039-50.597647-2.56-75.946667-3.06196 0.25098-23.391373 0.150588-46.832941 0.050196-70.27451 25.098039-0.100392 50.196078-0.25098 75.294118-0.150588-0.25098-36.241569-0.200784-72.432941-0.050196-108.67451zM749.076078 206.607059c23.993725-0.200784 47.987451-0.200784 71.930981 0.100392-0.652549 150.989804-0.150588 302.029804-0.200784 453.069804 29.916863 0.652549 59.883922 0.451765 89.85098 0.100392-0.351373 23.391373 1.40549 46.933333-0.953726 70.27451-29.665882 3.363137-59.733333-1.606275-89.349019 3.061961 0.853333 40.508235 0.100392 81.066667 0.401568 121.625098-23.893333-0.301176-47.786667-0.200784-71.68-0.150589 0.050196-41.160784-0.351373-82.371765-0.050196-123.582745-85.88549 0.351373-171.77098 0.301176-257.65647 0-0.552157-23.642353-0.652549-47.334902-0.250981-71.027451 85.985882-0.25098 171.971765 0.803137 257.907451-0.552156-0.150588-150.939608-0.200784-301.929412 0.050196-452.919216zM1251.087059 206.556863c23.692549 0.803137 47.284706-1.756863 70.977255-2.710588-0.200784 19.978039-0.25098 39.956078 0.150588 59.984313 84.680784 0.652549 169.461961-0.803137 254.142745 0.652549 7.529412 21.132549 1.305098 47.083922 3.162353 70.073726-195.664314-0.200784-391.328627-0.652549-586.992941 0.25098-0.652549-23.642353-0.501961-47.284706-0.301177-70.876863 85.584314 0 171.218824-0.100392 256.853334 0.050196 1.656471-19.07451 1.907451-38.249412 2.007843-57.424313z"
p-id="6609"></path>
<path
d="M518.876863 385.505882c2.409412-22.437647-5.471373-50.095686 3.865098-69.320784 61.339608-2.108235 122.88-0.451765 184.32-0.552157 0.150588 23.341176 0.200784 46.682353-0.301177 69.973334-62.59451 0.301176-125.239216 0.501961-187.883921-0.100393zM1101.301961 363.168627c21.985882-6.475294 47.184314 1.40549 70.425098-0.652549 0.301176 21.283137 0.301176 42.566275 0.150588 63.849412 76.348235 0.351373 152.746667 1.054118 229.145098-0.351372-0.100392-21.935686-0.100392-43.921569 0.652549-65.807059 22.136471 2.058039 44.373333 2.359216 66.509804-0.451765 5.220392 21.935686 3.463529 44.523922 3.71451 66.861177 45.578039-0.050196 91.156078 0.552157 136.734117-0.351373 0.100392 24.345098 0.050196 48.64 0.351373 72.985098-214.839216-0.401569-429.678431-0.401569-644.517647-0.050196 0.050196-24.19451 0.100392-48.38902-0.150588-72.583529 45.377255 0.401569 90.704314-0.451765 136.081568 0.552156 0.200784-21.333333-1.40549-42.767059 0.90353-64zM519.328627 498.396863c63.196863-5.872941 126.59451 1.606275 189.891765-0.301177-2.158431 22.738824-3.112157 45.527843-2.459608 68.367059-62.544314-0.351373-125.138824 1.807059-187.582745-0.050196 0.100392-22.638431 0.200784-45.327059 0.150588-68.015686zM1040.414118 602.553725c-0.150588-34.183529 33.02902-63.297255 66.409411-62.84549 104.508235-4.116078 209.167059-0.25098 313.725491-2.058039-0.050196 24.19451 0.050196 48.38902-0.552157 72.583529-95.272157 0.050196-190.494118-0.702745-285.716079 0.250981-23.642353 0-23.893333 27.557647-27.105882 44.523921 8.683922 4.216471 18.17098 5.923137 27.808627 5.421177 95.171765-0.803137 190.393725 0.200784 285.565491-0.552157-0.050196 23.843137-0.050196 47.686275-0.301177 71.529412-103.152941 0.050196-206.305882-0.501961-309.458823 0.100392-1.254902 19.124706-2.760784 50.04549 24.144313 50.145882 100.09098 1.305098 200.282353 0.351373 300.42353 0.451765 15.61098 1.204706 28.109804-13.753725 27.206274-28.762353 0.602353-71.780392-0.200784-143.61098 0.150588-215.441569 23.140392 0.100392 46.280784 0.200784 69.421177-0.301176 1.857255 81.869804 0.401569 163.84 0.552157 245.76 2.258824 38.299608-33.53098 74.089412-71.880784 71.127843-115.551373-0.200784-231.253333 1.455686-346.654118-1.305098-35.940392 6.27451-72.031373-25.148235-73.637647-60.887843-1.957647-63.196863-1.606275-126.494118-0.100392-189.741177z"
p-id="6610"></path>
</svg>
<filter id="filter">
<feTurbulence type="turbulence" baseFrequency="0.01 0.15" numOctaves="2" seed="5" stitchTiles="stitch"
result="turbulence" />
<feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix" />
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 150 -15" in="colormatrix" result="colormatrix1" />
<feDisplacementMap in="SourceGraphic" in2="colormatrix1" scale="10" xChannelSelector="R" yChannelSelector="A"
result="displacementMap" />
</filter>
</defs>
<use xlink:href="#douyin" x="0%" y="0%" class="douyin douyin1" />
<use xlink:href="#douyin" x="0%" y="0%" class="douyin douyin2" />
<use xlink:href="#douyin" x="0%" y="0%" class="douyin" />
<use xlink:href="#douyintext" x="30%" y="0%" class="douyin douyin1" />
<use xlink:href="#douyintext" x="30%" y="0%" class="douyin douyin2" />
<use xlink:href="#douyintext" x="30%" y="0%" class="douyin" />
</svg>
</div>
</body>
</html>