-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
81 lines (74 loc) · 4.44 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
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<!--
1. 一个抛物线。
2. 爆炸。
3. 粑粑。 1
-->
<!-- <svg width="188" height="188" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<symbol id="shit">
<image width="100%" height="50%" opacity="0" xlink:href="http://localhost:3000/shit.png">
<animateTransform attributeName="transform" type="translate" from="0 0" to="0, 30" begin="0.8s" dur="2s" repeatCount="1"></animateTransform>
<animate attributeName="opacity" from="1" to="0" begin="0.8s" dur="2s" repeatCount="1" freeze></animate>
</image>
</symbol>
</svg> -->
<svg width="100%" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- <path class="boom" d="M 255 79 C 256 79 133 -60 47 33" stroke="black" fill="red"></path> -->
<defs>
<g id="boom">
<image width="30" height="30"
opacity="0"
xlink:href="./zha.svg">
<!-- path="M 28 19 C 130 -71 263 80 263 80" -->
<animate attributeName="opacity" from="1" to="1" begin="0s" dur="0.8s" repeateCount=1></animate>
<animateMotion path="M 255 79 C 256 79 133 -60 47 33" begin="0s" dur="1s" repeatCount="1" />
<animate id="op" attributeName="opacity" from="1" to="0" begin="0.8s" dur="0.2s" repeatCount="1" fill="freeze">
</animate>
<animateTransform attributeName="transform"
type="rotate"
from="0 15 15" to="360 15 15"
begin="0s" dur="1s"
repeatCount="1"
/>
</image>
</g>
<g id="bom">
<image width="200" height="200"
opacity="0"
xlink:href="https://wimg.588ku.com/gif620/21/04/16/9dede1c2bb1cd8d98ecb5e933dbbd344.gif">
<animate id="bomStart" begin="op.end" attributeName="opacity" from="1" to="1" dur="0.2s" repeateCount></animate>
<animate id="bomEnd" begin="bomStart.end" attributeName="opacity" from="1" to="0" dur="0.2s" repeateCount="1" fill="freeze"></animate>
</image>
</g>
<symbol id="shit">
<image width="100%" height="50%" opacity="0" xlink:href="./shit.png">
<animate attributeName="opacity" from="1" to="1" begin="bomStart.end" dur="2.4s" repeatCount="1"></animate>
<animateTransform id="scale" attributeName="transform" type="scale" from="0.5" to="1" begin="bomStart.end"
dur="0.1s"></animateTransform>
<animateTransform attributeName="transform" type="translate" from="0 0" to="0, 40" begin="scale.end + 0.8s" dur="1.5s" repeatCount="1"></animateTransform>
<animate attributeName="opacity" from="1" to="0" begin="scale.end + 0.8s" dur="1.5s" repeatCount="1" freeze></animate>
</image>
</symbol>
</defs>
<use xlink:href="#boom" />
<use xlink:href="#bom" />
</svg>
<svg style="position:absolute" width="500px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<use x="250" y="30" xlink:href="#shit" width="150" height="300" transform="rotate(-17, 250, 30)" />
<use x="100" y="30" xlink:href="#shit" width="120" height="240" />
<use x="50" y="160" xlink:href="#shit" width="90" height="180" />
<use x="250" y="160" xlink:href="#shit" width="180" height="360" />
<use x="200" y="160" xlink:href="#shit" width="90" height="180" />
</svg>
</svg>
</body>
</html>