-
Notifications
You must be signed in to change notification settings - Fork 7
Expand file tree
/
Copy pathindex.html
More file actions
132 lines (106 loc) · 5.57 KB
/
index.html
File metadata and controls
132 lines (106 loc) · 5.57 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Animation</title>
<style>
body{
padding: 0;
}
.container{
position: relative;
width: 600px;
height: 400px;
background: #0096D5;
background-image: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%);
}
#rocket {
-webkit-animation: popup 1s ease infinite;
}
#rocketfire{
-webkit-animation: shake .2s linear infinite;
}
#cloud1{
-webkit-animation: fall 1s linear infinite;
}
#cloud2{
-webkit-animation: fall-2 1s linear infinite;
}
#cloud3{
-webkit-animation: fall-3 2s linear infinite;
}
#cloud4{
-webkit-animation: fall-4 3s linear infinite;
}
@-webkit-keyframes popup {
0% {
transform: translate(260px,200px);
}
50% {
transform: translate(260px,240px);
}
100% {
transform: translate(260px,200px);
}
}
@-webkit-keyframes fall {
from{
transform: translateY(-100px);
}
to {
transform: translateY(1000px)
}
}
@-webkit-keyframes fall-2 {
from{
transform: translate(200px,-200px);
}
to {
transform: translate(200px,800px)
}
}
@-webkit-keyframes fall-3 {
from{
transform: translate(400px,-400px);
}
to {
transform: translate(400px,1000px)
}
}
@-webkit-keyframes fall-4 {
from{
transform: translate(500px,-400px);
}
to {
transform: translate(500px,1000px)
}
}
@-webkit-keyframes shake {
0% { -webkit-transform: translate(55px, 135px) rotate(7deg); }
20% { -webkit-transform: translate(55px, 135px) rotate(0deg); }
40% { -webkit-transform: translate(55px, 135px) rotate(-7deg); }
60% { -webkit-transform: translate(55px, 135px) rotate(0deg); }
100% { -webkit-transform: translate(55px, 135px) rotate(0deg); }
}
</style>
</head>
<body>
<div class="container">
<svg width="600" height="400" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path id="cloud1" d="M-24.205 89.653c-.048-.858-.072-1.723-.072-2.593 0-25.167 20.438-45.568 45.65-45.568 7.987 0 15.495 2.047 22.026 5.645C49.733 20.12 74.025 0 103.024 0c30.752 0 56.21 22.625 60.577 52.108 1.56-.16 3.143-.243 4.745-.243 25.21 0 45.65 20.4 45.65 45.568C214 122.6 193.56 143 168.35 143H-24.278C-39.038 143-51 131.058-51 116.326c0-14.73 11.964-26.673 26.723-26.673h.072z" opacity=".4" fill="#FFF" fill-rule="evenodd"/>
<path id="cloud2" d="M128.42 62.694c.033-.6.05-1.205.05-1.813 0-17.596-14.293-31.862-31.924-31.862-5.585 0-10.835 1.43-15.402 3.947C76.712 14.07 59.724 0 39.446 0 17.942 0 .14 15.822-2.916 36.44c-1.09-.113-2.197-.17-3.317-.17-17.63 0-31.924 14.266-31.924 31.865C-38.157 85.733-23.864 100-6.233 100H128.47c10.32 0 18.687-8.35 18.687-18.653 0-10.302-8.366-18.653-18.687-18.653h-.05z" opacity=".3" fill="#FFF" fill-rule="evenodd"/>
<path id="cloud3" d="M13.043 42.632c-.023-.408-.034-.82-.034-1.233 0-11.97 9.716-21.67 21.705-21.67 3.798 0 7.368.972 10.473 2.683C48.203 9.567 59.754 0 73.544 0c14.623 0 26.73 10.76 28.806 24.78.743-.078 1.496-.117 2.258-.117 11.99 0 21.708 9.7 21.708 21.67 0 11.966-9.72 21.667-21.708 21.667H13.01C5.99 68 .3 62.32.3 55.316c0-7.005 5.69-12.684 12.71-12.684h.033z" opacity=".2" fill="#FFF" fill-rule="evenodd"/>
<path id="cloud4" d="M84.954 31.974c.017-.306.026-.614.026-.925 0-8.978-7.29-16.254-16.28-16.254-2.85 0-5.527.73-7.856 2.013C58.584 7.175 49.92 0 39.578 0 28.61 0 19.53 8.07 17.973 18.584c-.556-.057-1.12-.087-1.692-.087C7.29 18.497 0 25.773 0 34.75 0 43.723 7.29 51 16.28 51h68.7c5.264 0 9.53-4.26 9.53-9.513 0-5.254-4.266-9.513-9.53-9.513h-.026z" opacity=".1" fill="#FFF" fill-rule="evenodd"/>
<g id="rocket" fill="none" fill-rule="evenodd">
<g id="rocketfire" fill="none" fill-rule="evenodd">
<path d="M37.957.898s24.385 33.987 18.18 35.765c-6.203 1.78-15.15-12.215-15.174-3.03-.025 9.183 15.664 23.193 6.74 21.14-12.786-2.946-17.86-21.3-18.36-9.46-.5 11.838 3.24 24.093-7.87 13.83C10.36 48.88 12.706 29.31 10.8 36.675c-1.905 7.365-1.388 22.79-5.82 16.2C.55 46.282.147 14.62.147 14.62L37.957.9z" fill="#FF5B0D"/>
<path d="M30.482 3.97s17.482 18.04 13.224 18.796c-4.257.754-11.3-4.462-10.826 1.15.476 5.614 6.177 13.274.1 8.923-6.076-4.354-10.003-13.51-9.718-6.3.285 7.21 5.17 18.003-1.024 10.335C16.045 29.21 11.93 17.89 10.988 22.29c-.94 4.4.25 13.86-3.213 9.592-3.464-4.268-1.732-19-1.732-19l24.44-8.912z" fill="#FFD03D"/>
</g>
<path d="M96.008 81.165c-1.11-6.988-2.935-13.838-5.446-20.39C78.54 29.41 51.78 6.25 20.735.347c-.876-.167-1.78.18-2.322.89C-.722 26.373-5.145 61.487 6.876 92.85c2.433 6.348 5.528 12.494 9.213 18.276-1.78 3.96-3.277 8.263-4.458 12.817-.187.698-.035 1.45.42 2.024l31.82 40.84c.536.69 1.405 1.02 2.263.878.842-.153 1.55-.755 1.838-1.578 2.097-6.12 6.06-11.85 11.304-16.364l.934 2.44c.465 1.21 1.82 1.82 3.038 1.355l25.793-9.886c1.227-.47 1.83-1.833 1.366-3.04l-.715-1.865c6.92-.135 13.694 1.468 19.348 4.63.61.342 1.358.386 2.003.14.14-.055.284-.135.413-.22.734-.466 1.146-1.287 1.1-2.152l-3.634-51.657c-.038-.708-.427-1.37-1.026-1.78-3.918-2.586-7.91-4.79-11.89-6.543z" fill="#FFF"/>
<path d="M55.53 62.857c-3.134 5.73-9.136 9.295-15.68 9.295-6.22 0-11.89-3.165-15.172-8.447-1.73-2.807-2.652-6.017-2.652-9.295 0-9.776 7.996-17.73 17.823-17.73 9.83 0 17.82 7.954 17.82 17.73 0 2.955-.746 5.88-2.14 8.447z" fill="#75C9EC"/>
<path d="M27.543 59.59c1.013 2.168 2.63 4.02 4.66 5.35 3.84 2.504 8.6 2.838 12.73.91 4.363-2.038 7.255-6.273 7.56-11.07.14-2.15-.276-4.32-1.197-6.294-3.046-6.497-10.846-9.317-17.393-6.26-6.544 3.055-9.4 10.85-6.36 17.363z" fill="#0096D5"/>
</g>
</svg>
</div>
</body>
</html>