cyberweb 0.6.17 → 0.7.9
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of cyberweb might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/README.md +299 -134
- data/bin/images_from_this_webpage +11 -0
- data/doc/README.gen +276 -107
- data/doc/todo/todo_for_the_cyberweb_project.md +90 -90
- data/examples/css/day_night_toggle/day_night_toggle.html +202 -0
- data/examples/css/fleeing_dinosaur_animation/fleeing_dinosaur_animation.html +420 -0
- data/examples/css/important_style/important_style.html +35 -0
- data/examples/html/custom_cursor.html +1 -1
- data/examples/javascript_and_jquery/misc/miscallenous_javascript_examples.html +25 -0
- data/examples/javascript_and_jquery/roll_a_die/roll_a_die.html +48 -0
- data/lib/cyberweb/base/misc.rb +7 -0
- data/lib/cyberweb/cascading_style_sheets/div.css +2 -2
- data/lib/cyberweb/cascading_style_sheets/drop_shadow.css +4 -0
- data/lib/cyberweb/cascading_style_sheets/fonts.css +42 -30
- data/lib/cyberweb/cascading_style_sheets/glow_effects.css +58 -0
- data/lib/cyberweb/cascading_style_sheets/margin.css +254 -248
- data/lib/cyberweb/cascading_style_sheets/tooltip.css +73 -0
- data/lib/cyberweb/generator/cgi.rb +2 -1
- data/lib/cyberweb/javascript_code/custom_functions.js +16 -16
- data/lib/cyberweb/javascript_code/math.js +18 -0
- data/lib/cyberweb/javascript_code/simulate_a_dice.js +13 -5
- data/lib/cyberweb/sinatra/custom_extensions.rb +2 -2
- data/lib/cyberweb/toplevel_methods/misc.rb +44 -0
- data/lib/cyberweb/utility_scripts/create_coloured_tags.rb +1 -5
- data/lib/cyberweb/utility_scripts/download_balloon_css.rb +1 -5
- data/lib/cyberweb/utility_scripts/fix_incorrect_links_to_locally_existing_images_in_this_file.rb +5 -33
- data/lib/cyberweb/utility_scripts/hyperlink_all_images_from.rb +1 -5
- data/lib/cyberweb/utility_scripts/obtain_css_rules.rb +169 -0
- data/lib/cyberweb/version/version.rb +2 -2
- data/lib/cyberweb/web_object/html_tags.rb +12 -1
- data/lib/cyberweb/web_object/images.rb +534 -178
- data/lib/cyberweb/web_object/javascript_and_jquery.rb +9 -9
- data/lib/cyberweb/web_object/link.rb +102 -67
- data/lib/cyberweb/web_object/misc.rb +320 -518
- data/lib/cyberweb/yaml/js_files_to_load.yml +3 -2
- data/lib/cyberweb/yaml/load_these_yaml_files_by_default.yml +1 -0
- data/test/complex_tests/testing_style_variants/show_coloured_boxes.cgi +2 -2
- data/test/javascript/testing_various_javascript_related_APIs.html +17 -0
- data/test/simple_tests/testing_dragging_an_image.cgi +2 -0
- data/test/simple_tests/testing_uniform_css_rules_for_all_images.cgi +25 -0
- metadata +15 -5
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>
|
|
6
|
+
Day Night Toggle
|
|
7
|
+
</title>
|
|
8
|
+
|
|
9
|
+
<link rel="icon" type="image/png" href="https://i.imgur.com/GR8pcxq.png"/>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
|
|
13
|
+
/* F5EB42 - sun inner
|
|
14
|
+
E4C74D - sun outer
|
|
15
|
+
FFFFFF - cloud inner
|
|
16
|
+
D4D4D2 - cloud outer
|
|
17
|
+
81C0D5 - parent outer
|
|
18
|
+
C0E6F6 - parent inner
|
|
19
|
+
FFFDF2 - moon inner
|
|
20
|
+
DEE1C5 - moon outer
|
|
21
|
+
FCFCFC - stars */
|
|
22
|
+
body {
|
|
23
|
+
background-color: #f3f3f3;
|
|
24
|
+
}
|
|
25
|
+
.wrapper {
|
|
26
|
+
padding-top: 40px;
|
|
27
|
+
text-align: center;
|
|
28
|
+
}
|
|
29
|
+
.toggle {
|
|
30
|
+
position: relative;
|
|
31
|
+
display: inline-block;
|
|
32
|
+
width: 100px;
|
|
33
|
+
margin-left: 100px;
|
|
34
|
+
padding: 4px;
|
|
35
|
+
border-radius: 40px;
|
|
36
|
+
}
|
|
37
|
+
.toggle:before, .toggle:after {
|
|
38
|
+
content: '';
|
|
39
|
+
display: table;
|
|
40
|
+
}
|
|
41
|
+
.toggle:after {
|
|
42
|
+
clear: both;
|
|
43
|
+
}
|
|
44
|
+
.toggle-bg {
|
|
45
|
+
position: absolute;
|
|
46
|
+
top: -4px;
|
|
47
|
+
left: -4px;
|
|
48
|
+
width: 100%;
|
|
49
|
+
height: 100%;
|
|
50
|
+
background-color: #c0e6f6;
|
|
51
|
+
border-radius: 40px;
|
|
52
|
+
border: 4px solid #81c0d5;
|
|
53
|
+
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
54
|
+
}
|
|
55
|
+
.toggle-input {
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: 0;
|
|
58
|
+
left: 0;
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
border: 1px solid red;
|
|
62
|
+
border-radius: 40px;
|
|
63
|
+
z-index: 2;
|
|
64
|
+
opacity: 0;
|
|
65
|
+
}
|
|
66
|
+
.toggle-switch {
|
|
67
|
+
position: relative;
|
|
68
|
+
width: 40px;
|
|
69
|
+
height: 40px;
|
|
70
|
+
margin-left: 50px;
|
|
71
|
+
background-color: #f5eb42;
|
|
72
|
+
border: 4px solid #e4c74d;
|
|
73
|
+
border-radius: 50%;
|
|
74
|
+
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
75
|
+
}
|
|
76
|
+
.toggle-switch-figure {
|
|
77
|
+
position: absolute;
|
|
78
|
+
bottom: -14px;
|
|
79
|
+
left: -50px;
|
|
80
|
+
display: block;
|
|
81
|
+
width: 80px;
|
|
82
|
+
height: 30px;
|
|
83
|
+
border: 8px solid #d4d4d2;
|
|
84
|
+
border-radius: 20px;
|
|
85
|
+
background-color: #fff;
|
|
86
|
+
transform: scale(0.4);
|
|
87
|
+
transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
88
|
+
}
|
|
89
|
+
.toggle-switch-figure:after {
|
|
90
|
+
content: '';
|
|
91
|
+
display: block;
|
|
92
|
+
position: relative;
|
|
93
|
+
top: -65px;
|
|
94
|
+
right: -42px;
|
|
95
|
+
width: 15px;
|
|
96
|
+
height: 15px;
|
|
97
|
+
border: 8px solid #d4d4d2;
|
|
98
|
+
border-radius: 100%;
|
|
99
|
+
border-right-color: transparent;
|
|
100
|
+
border-bottom-color: transparent;
|
|
101
|
+
transform: rotateZ(70deg);
|
|
102
|
+
background-color: #fff;
|
|
103
|
+
}
|
|
104
|
+
.toggle-switch-figure:before {
|
|
105
|
+
content: '';
|
|
106
|
+
display: block;
|
|
107
|
+
position: relative;
|
|
108
|
+
top: -25px;
|
|
109
|
+
right: -10px;
|
|
110
|
+
width: 30px;
|
|
111
|
+
height: 30px;
|
|
112
|
+
border: 8px solid #d4d4d2;
|
|
113
|
+
border-radius: 100%;
|
|
114
|
+
border-right-color: transparent;
|
|
115
|
+
border-bottom-color: transparent;
|
|
116
|
+
transform: rotateZ(30deg);
|
|
117
|
+
background-color: #fff;
|
|
118
|
+
}
|
|
119
|
+
.toggle-switch-figureAlt {
|
|
120
|
+
content: '';
|
|
121
|
+
position: absolute;
|
|
122
|
+
top: 5px;
|
|
123
|
+
left: 2px;
|
|
124
|
+
width: 2px;
|
|
125
|
+
height: 2px;
|
|
126
|
+
background-color: #efeeda;
|
|
127
|
+
border-radius: 100%;
|
|
128
|
+
border: 4px solid #dee1c5;
|
|
129
|
+
box-shadow: 42px -7px 0 -3px #fcfcfc, 75px -10px 0 -3px #fcfcfc, 54px 4px 0 -4px #fcfcfc, 83px 7px 0 -2px #fcfcfc, 63px 18px 0 -4px #fcfcfc, 44px 28px 0 -2px #fcfcfc, 78px 23px 0 -3px #fcfcfc;
|
|
130
|
+
transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
131
|
+
transform: scale(0);
|
|
132
|
+
}
|
|
133
|
+
.toggle-switch-figureAlt:before {
|
|
134
|
+
content: '';
|
|
135
|
+
position: absolute;
|
|
136
|
+
top: -6px;
|
|
137
|
+
left: 18px;
|
|
138
|
+
width: 7px;
|
|
139
|
+
height: 7px;
|
|
140
|
+
background-color: #efeeda;
|
|
141
|
+
border-radius: 100%;
|
|
142
|
+
border: 4px solid #dee1c5;
|
|
143
|
+
}
|
|
144
|
+
.toggle-switch-figureAlt:after {
|
|
145
|
+
content: '';
|
|
146
|
+
position: absolute;
|
|
147
|
+
top: 19px;
|
|
148
|
+
left: 15px;
|
|
149
|
+
width: 2px;
|
|
150
|
+
height: 2px;
|
|
151
|
+
background-color: #efeeda;
|
|
152
|
+
border-radius: 100%;
|
|
153
|
+
border: 4px solid #dee1c5;
|
|
154
|
+
}
|
|
155
|
+
.toggle-input:checked ~ .toggle-switch {
|
|
156
|
+
margin-left: 0;
|
|
157
|
+
border-color: #dee1c5;
|
|
158
|
+
background-color: #fffdf2;
|
|
159
|
+
}
|
|
160
|
+
.toggle-input:checked ~ .toggle-bg {
|
|
161
|
+
background-color: #484848;
|
|
162
|
+
border-color: #202020;
|
|
163
|
+
}
|
|
164
|
+
.toggle-input:checked ~ .toggle-switch .toggle-switch-figure {
|
|
165
|
+
margin-left: 40px;
|
|
166
|
+
opacity: 0;
|
|
167
|
+
transform: scale(0.1);
|
|
168
|
+
}
|
|
169
|
+
.toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt {
|
|
170
|
+
transform: scale(1);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
</style>
|
|
174
|
+
</head>
|
|
175
|
+
<body>
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
<div class="wrapper">
|
|
179
|
+
<div class="toggle">
|
|
180
|
+
<input class="toggle-input" type="checkbox" />
|
|
181
|
+
<div class="toggle-bg"></div>
|
|
182
|
+
<div class="toggle-switch">
|
|
183
|
+
<div class="toggle-switch-figure"></div>
|
|
184
|
+
<div class="toggle-switch-figureAlt"></div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<script>
|
|
190
|
+
|
|
191
|
+
const toggle = document.querySelector('.toggle-input');
|
|
192
|
+
const initialState = localStorage.getItem('toggleState') == 'true';
|
|
193
|
+
toggle.checked = initialState;
|
|
194
|
+
|
|
195
|
+
toggle.addEventListener('change', function() {
|
|
196
|
+
localStorage.setItem('toggleState', toggle.checked);
|
|
197
|
+
});
|
|
198
|
+
|
|
199
|
+
</script>
|
|
200
|
+
|
|
201
|
+
</body>
|
|
202
|
+
</html>
|
|
@@ -0,0 +1,420 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" >
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Fleeing Dinosaur Animation</title>
|
|
6
|
+
<style>
|
|
7
|
+
@-webkit-keyframes eye {
|
|
8
|
+
0% {
|
|
9
|
+
box-shadow: 3em -9em #535353;
|
|
10
|
+
}
|
|
11
|
+
5% {
|
|
12
|
+
box-shadow: 0 0 0 0 #535353;
|
|
13
|
+
}
|
|
14
|
+
50% {
|
|
15
|
+
box-shadow: 0em 0em #535353;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
@-moz-keyframes eye {
|
|
19
|
+
0% {
|
|
20
|
+
box-shadow: 3em -9em #535353;
|
|
21
|
+
}
|
|
22
|
+
5% {
|
|
23
|
+
box-shadow: 0 0 0 0 #535353;
|
|
24
|
+
}
|
|
25
|
+
50% {
|
|
26
|
+
box-shadow: 0em 0em #535353;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
@keyframes eye {
|
|
30
|
+
0% {
|
|
31
|
+
box-shadow: 3em -9em #535353;
|
|
32
|
+
}
|
|
33
|
+
5% {
|
|
34
|
+
box-shadow: 0 0 0 0 #535353;
|
|
35
|
+
}
|
|
36
|
+
50% {
|
|
37
|
+
box-shadow: 0em 0em #535353;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
@-webkit-keyframes mouth_of_the_dinosaur_animation {
|
|
41
|
+
0% {
|
|
42
|
+
box-shadow: 6em -4em #535353,
|
|
43
|
+
7em -4em #535353,
|
|
44
|
+
8em -4em #535353;
|
|
45
|
+
}
|
|
46
|
+
50% {
|
|
47
|
+
box-shadow: 5em -3em #535353,
|
|
48
|
+
6em -3em #535353,
|
|
49
|
+
7em -3em #535353,
|
|
50
|
+
8em -3em #535353;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
@-moz-keyframes mouth_of_the_dinosaur_animation {
|
|
54
|
+
0% {
|
|
55
|
+
box-shadow: 6em -4em #535353,
|
|
56
|
+
7em -4em #535353,
|
|
57
|
+
8em -4em #535353;
|
|
58
|
+
}
|
|
59
|
+
50% {
|
|
60
|
+
box-shadow: 5em -3em #535353,
|
|
61
|
+
6em -3em #535353,
|
|
62
|
+
7em -3em #535353,
|
|
63
|
+
8em -3em #535353;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
@keyframes mouth_of_the_dinosaur_animation {
|
|
67
|
+
0% {
|
|
68
|
+
box-shadow: 6em -4em #535353,
|
|
69
|
+
7em -4em #535353,
|
|
70
|
+
8em -4em #535353;
|
|
71
|
+
}
|
|
72
|
+
50% {
|
|
73
|
+
box-shadow: 5em -3em #535353,
|
|
74
|
+
6em -3em #535353,
|
|
75
|
+
7em -3em #535353,
|
|
76
|
+
8em -3em #535353;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
@-webkit-keyframes _animation {
|
|
80
|
+
0% {
|
|
81
|
+
box-shadow: -23em -23em #535353,
|
|
82
|
+
-20em -20em #535353,
|
|
83
|
+
-18em -18em #535353,
|
|
84
|
+
-17em -17em #535353,
|
|
85
|
+
-16em -16em #535353,
|
|
86
|
+
-15em -15em #535353,
|
|
87
|
+
-13em -14em #535353,
|
|
88
|
+
-12em -14em #535353,
|
|
89
|
+
-11em -14em #535353,
|
|
90
|
+
-14em -13em #535353,
|
|
91
|
+
-13em -13em #535353,
|
|
92
|
+
-12em -13em #535353,
|
|
93
|
+
-11em -13em #535353,
|
|
94
|
+
-10em -13em #535353,
|
|
95
|
+
-14em -12em #535353,
|
|
96
|
+
-13em -12em #535353,
|
|
97
|
+
-11em -12em #535353,
|
|
98
|
+
-10em -12em #535353,
|
|
99
|
+
-14em -11em #535353,
|
|
100
|
+
-13em -11em #535353,
|
|
101
|
+
-12em -11em #535353,
|
|
102
|
+
-11em -11em #535353,
|
|
103
|
+
-10em -11em #535353,
|
|
104
|
+
-13em -10em #535353,
|
|
105
|
+
-12em -10em #535353,
|
|
106
|
+
-11em -10em #535353,
|
|
107
|
+
-9em -19em #535353,
|
|
108
|
+
-8em -18em #535353,
|
|
109
|
+
-7em -17em #535353,
|
|
110
|
+
-6em -16em #535353,
|
|
111
|
+
-5em -16em #535353,
|
|
112
|
+
-6em -15em #535353,
|
|
113
|
+
-5em -15em #535353;
|
|
114
|
+
}
|
|
115
|
+
33% {
|
|
116
|
+
box-shadow: -24em -24em #535353,
|
|
117
|
+
-21em -21em #535353,
|
|
118
|
+
-18em -18em #535353,
|
|
119
|
+
-17em -17em #535353, -16em -16em #535353, -15em -15em #535353, -13em -14em #535353 , -12em -14em #535353 , -11em -14em #535353, -14em -13em #535353 , -13em -13em #535353 , -12em -13em #535353 , -11em -13em #535353 , -10em -13em #535353, -14em -12em #535353 , -13em -12em #535353 , -11em -12em #535353 , -10em -12em #535353, -14em -11em #535353 , -13em -11em #535353 , -12em -11em #535353 , -11em -11em #535353 , -10em -11em #535353, -13em -10em #535353 , -12em -10em #535353 , -11em -10em #535353, -10em -20em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353 , -5em -16em #535353, -6em -15em #535353 , -5em -15em #535353;
|
|
120
|
+
}
|
|
121
|
+
66% {
|
|
122
|
+
box-shadow: -26em -26em #535353, -22em -22em #535353, -18em -18em #535353, -17em -17em #535353, -16em -16em #535353, -15em -15em #535353, -13em -14em #535353 , -12em -14em #535353 , -11em -14em #535353, -14em -13em #535353 , -13em -13em #535353 , -12em -13em #535353 , -11em -13em #535353 , -10em -13em #535353, -14em -12em #535353 , -13em -12em #535353 , -11em -12em #535353 , -10em -12em #535353, -14em -11em #535353 , -13em -11em #535353 , -12em -11em #535353 , -11em -11em #535353 , -10em -11em #535353, -13em -10em #535353 , -12em -10em #535353 , -11em -10em #535353, -11em -21em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353 , -5em -16em #535353, -6em -15em #535353 , -5em -15em #535353;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
@-moz-keyframes comets_animation {
|
|
126
|
+
0% {
|
|
127
|
+
box-shadow: -23em -23em #535353, -20em -20em #535353, -18em -18em #535353, -17em -17em #535353, -16em -16em #535353, -15em -15em #535353, -13em -14em #535353 , -12em -14em #535353 , -11em -14em #535353, -14em -13em #535353 , -13em -13em #535353 , -12em -13em #535353 , -11em -13em #535353 , -10em -13em #535353, -14em -12em #535353 , -13em -12em #535353 , -11em -12em #535353 , -10em -12em #535353, -14em -11em #535353 , -13em -11em #535353 , -12em -11em #535353 , -11em -11em #535353 , -10em -11em #535353, -13em -10em #535353 , -12em -10em #535353 , -11em -10em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353 , -5em -16em #535353, -6em -15em #535353 , -5em -15em #535353;
|
|
128
|
+
}
|
|
129
|
+
33% {
|
|
130
|
+
box-shadow: -24em -24em #535353, -21em -21em #535353, -18em -18em #535353, -17em -17em #535353, -16em -16em #535353, -15em -15em #535353, -13em -14em #535353 , -12em -14em #535353 , -11em -14em #535353, -14em -13em #535353 , -13em -13em #535353 , -12em -13em #535353 , -11em -13em #535353 , -10em -13em #535353, -14em -12em #535353 , -13em -12em #535353 , -11em -12em #535353 , -10em -12em #535353, -14em -11em #535353 , -13em -11em #535353 , -12em -11em #535353 , -11em -11em #535353 , -10em -11em #535353, -13em -10em #535353 , -12em -10em #535353 , -11em -10em #535353, -10em -20em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353 , -5em -16em #535353, -6em -15em #535353 , -5em -15em #535353;
|
|
131
|
+
}
|
|
132
|
+
66% {
|
|
133
|
+
box-shadow: -26em -26em #535353, -22em -22em #535353, -18em -18em #535353, -17em -17em #535353, -16em -16em #535353, -15em -15em #535353, -13em -14em #535353 , -12em -14em #535353 , -11em -14em #535353, -14em -13em #535353 , -13em -13em #535353 , -12em -13em #535353 , -11em -13em #535353 , -10em -13em #535353, -14em -12em #535353 , -13em -12em #535353 , -11em -12em #535353 , -10em -12em #535353, -14em -11em #535353 , -13em -11em #535353 , -12em -11em #535353 , -11em -11em #535353 , -10em -11em #535353, -13em -10em #535353 , -12em -10em #535353 , -11em -10em #535353, -11em -21em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353 , -5em -16em #535353, -6em -15em #535353 , -5em -15em #535353;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
@keyframes comets_animation {
|
|
137
|
+
0% {
|
|
138
|
+
box-shadow: -23em -23em #535353,
|
|
139
|
+
-20em -20em #535353,
|
|
140
|
+
-18em -18em #535353,
|
|
141
|
+
-17em -17em #535353,
|
|
142
|
+
-16em -16em #535353,
|
|
143
|
+
-15em -15em #535353,
|
|
144
|
+
-13em -14em #535353,
|
|
145
|
+
-12em -14em #535353,
|
|
146
|
+
-11em -14em #535353,
|
|
147
|
+
-14em -13em #535353,
|
|
148
|
+
-13em -13em #535353,
|
|
149
|
+
-12em -13em #535353,
|
|
150
|
+
-11em -13em #535353,
|
|
151
|
+
-10em -13em #535353,
|
|
152
|
+
-14em -12em #535353,
|
|
153
|
+
-13em -12em #535353,
|
|
154
|
+
-11em -12em #535353,
|
|
155
|
+
-10em -12em #535353,
|
|
156
|
+
-14em -11em #535353,
|
|
157
|
+
-13em -11em #535353,
|
|
158
|
+
-12em -11em #535353,
|
|
159
|
+
-11em -11em #535353,
|
|
160
|
+
-10em -11em #535353,
|
|
161
|
+
-13em -10em #535353,
|
|
162
|
+
-12em -10em #535353,
|
|
163
|
+
-11em -10em #535353,
|
|
164
|
+
-9em -19em #535353,
|
|
165
|
+
-8em -18em #535353,
|
|
166
|
+
-7em -17em #535353,
|
|
167
|
+
-6em -16em #535353,
|
|
168
|
+
-5em -16em #535353,
|
|
169
|
+
-6em -15em #535353,
|
|
170
|
+
-5em -15em #535353;
|
|
171
|
+
}
|
|
172
|
+
33% {
|
|
173
|
+
box-shadow: -24em -24em #535353,
|
|
174
|
+
-21em -21em #535353,
|
|
175
|
+
-18em -18em #535353,
|
|
176
|
+
-17em -17em #535353,
|
|
177
|
+
-16em -16em #535353,
|
|
178
|
+
-15em -15em #535353,
|
|
179
|
+
-13em -14em #535353,
|
|
180
|
+
-12em -14em #535353,
|
|
181
|
+
-11em -14em #535353,
|
|
182
|
+
-14em -13em #535353,
|
|
183
|
+
-13em -13em #535353,
|
|
184
|
+
-12em -13em #535353,
|
|
185
|
+
-11em -13em #535353,
|
|
186
|
+
-10em -13em #535353,
|
|
187
|
+
-14em -12em #535353,
|
|
188
|
+
-13em -12em #535353,
|
|
189
|
+
-11em -12em #535353,
|
|
190
|
+
-10em -12em #535353,
|
|
191
|
+
-14em -11em #535353,
|
|
192
|
+
-13em -11em #535353,
|
|
193
|
+
-12em -11em #535353,
|
|
194
|
+
-11em -11em #535353,
|
|
195
|
+
-10em -11em #535353,
|
|
196
|
+
-13em -10em #535353,
|
|
197
|
+
-12em -10em #535353,
|
|
198
|
+
-11em -10em #535353,
|
|
199
|
+
-10em -20em #535353,
|
|
200
|
+
-9em -19em #535353,
|
|
201
|
+
-8em -18em #535353,
|
|
202
|
+
-7em -17em #535353,
|
|
203
|
+
-6em -16em #535353,
|
|
204
|
+
-5em -16em #535353,
|
|
205
|
+
-6em -15em #535353,
|
|
206
|
+
-5em -15em #535353;
|
|
207
|
+
}
|
|
208
|
+
66% {
|
|
209
|
+
box-shadow: -26em -26em #535353, -22em -22em #535353, -18em -18em #535353, -17em -17em #535353, -16em -16em #535353, -15em -15em #535353, -13em -14em #535353 , -12em -14em #535353 , -11em -14em #535353, -14em -13em #535353 , -13em -13em #535353 , -12em -13em #535353 , -11em -13em #535353 , -10em -13em #535353, -14em -12em #535353 , -13em -12em #535353 , -11em -12em #535353 , -10em -12em #535353, -14em -11em #535353 , -13em -11em #535353 , -12em -11em #535353 , -11em -11em #535353 , -10em -11em #535353, -13em -10em #535353 , -12em -10em #535353 , -11em -10em #535353, -11em -21em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353 , -5em -16em #535353, -6em -15em #535353 , -5em -15em #535353;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
@-webkit-keyframes ground {
|
|
213
|
+
0% {
|
|
214
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 8em 8em #535353 , 9em 8em #535353 , 10em 8em #535353, -7em 9em #535353 , -6em 9em #535353, 6em 10em #535353 , 7em 10em #535353, -10em 11em #535353 , -9em 11em #535353;
|
|
215
|
+
}
|
|
216
|
+
15% {
|
|
217
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 4em 8em #535353 , 5em 8em #535353 , 6em 8em #535353, -12em 9em #535353 , -11em 9em #535353, 2em 10em #535353 , 3em 10em #535353, 10em 11em #535353 , 11em 11em #535353;
|
|
218
|
+
}
|
|
219
|
+
30% {
|
|
220
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 0em 8em #535353 , 1em 8em #535353 , 2em 8em #535353, 8em 9em #535353 , 9em 9em #535353, -2em 10em #535353 , -1em 10em #535353, 6em 11em #535353 , 7em 11em #535353;
|
|
221
|
+
}
|
|
222
|
+
45% {
|
|
223
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -4em 8em #535353 , -3em 8em #535353 , -2em 8em #535353, 4em 9em #535353 , 5em 9em #535353, -6em 10em #535353 , -5em 10em #535353, 2em 11em #535353 , 3em 11em #535353;
|
|
224
|
+
}
|
|
225
|
+
60% {
|
|
226
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -8em 8em #535353 , -7em 8em #535353 , -6em 8em #535353, 0em 9em #535353 , 1em 9em #535353, -10em 10em #535353 , -9em 10em #535353, -2em 11em #535353 , -1em 11em #535353;
|
|
227
|
+
}
|
|
228
|
+
75% {
|
|
229
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -12em 8em #535353 , -11em 8em #535353 , -10em 8em #535353, -4em 9em #535353 , -3em 9em #535353, 10em 10em #535353 , 11em 10em #535353, -6em 11em #535353 , -5em 11em #535353;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
@-moz-keyframes ground {
|
|
233
|
+
0% {
|
|
234
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 8em 8em #535353 , 9em 8em #535353 , 10em 8em #535353, -7em 9em #535353 , -6em 9em #535353, 6em 10em #535353 , 7em 10em #535353, -10em 11em #535353 , -9em 11em #535353;
|
|
235
|
+
}
|
|
236
|
+
15% {
|
|
237
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 4em 8em #535353 , 5em 8em #535353 , 6em 8em #535353, -12em 9em #535353 , -11em 9em #535353, 2em 10em #535353 , 3em 10em #535353, 10em 11em #535353 , 11em 11em #535353;
|
|
238
|
+
}
|
|
239
|
+
30% {
|
|
240
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 0em 8em #535353 , 1em 8em #535353 , 2em 8em #535353, 8em 9em #535353 , 9em 9em #535353, -2em 10em #535353 , -1em 10em #535353, 6em 11em #535353 , 7em 11em #535353;
|
|
241
|
+
}
|
|
242
|
+
45% {
|
|
243
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -4em 8em #535353 , -3em 8em #535353 , -2em 8em #535353, 4em 9em #535353 , 5em 9em #535353, -6em 10em #535353 , -5em 10em #535353, 2em 11em #535353 , 3em 11em #535353;
|
|
244
|
+
}
|
|
245
|
+
60% {
|
|
246
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -8em 8em #535353 , -7em 8em #535353 , -6em 8em #535353, 0em 9em #535353 , 1em 9em #535353, -10em 10em #535353 , -9em 10em #535353, -2em 11em #535353 , -1em 11em #535353;
|
|
247
|
+
}
|
|
248
|
+
75% {
|
|
249
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -12em 8em #535353 , -11em 8em #535353 , -10em 8em #535353, -4em 9em #535353 , -3em 9em #535353, 10em 10em #535353 , 11em 10em #535353, -6em 11em #535353 , -5em 11em #535353;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
@keyframes ground {
|
|
253
|
+
0% {
|
|
254
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 8em 8em #535353 , 9em 8em #535353 , 10em 8em #535353, -7em 9em #535353 , -6em 9em #535353, 6em 10em #535353 , 7em 10em #535353, -10em 11em #535353 , -9em 11em #535353;
|
|
255
|
+
}
|
|
256
|
+
15% {
|
|
257
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 4em 8em #535353 , 5em 8em #535353 , 6em 8em #535353, -12em 9em #535353 , -11em 9em #535353, 2em 10em #535353 , 3em 10em #535353, 10em 11em #535353 , 11em 11em #535353;
|
|
258
|
+
}
|
|
259
|
+
30% {
|
|
260
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, 0em 8em #535353 , 1em 8em #535353 , 2em 8em #535353, 8em 9em #535353 , 9em 9em #535353, -2em 10em #535353 , -1em 10em #535353, 6em 11em #535353 , 7em 11em #535353;
|
|
261
|
+
}
|
|
262
|
+
45% {
|
|
263
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -4em 8em #535353 , -3em 8em #535353 , -2em 8em #535353, 4em 9em #535353 , 5em 9em #535353, -6em 10em #535353 , -5em 10em #535353, 2em 11em #535353 , 3em 11em #535353;
|
|
264
|
+
}
|
|
265
|
+
60% {
|
|
266
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -8em 8em #535353 , -7em 8em #535353 , -6em 8em #535353, 0em 9em #535353 , 1em 9em #535353, -10em 10em #535353 , -9em 10em #535353, -2em 11em #535353 , -1em 11em #535353;
|
|
267
|
+
}
|
|
268
|
+
75% {
|
|
269
|
+
box-shadow: -12em 6em #535353 , -11em 6em #535353 , -10em 6em #535353 , -9em 6em #535353 , -8em 6em #535353 , -7em 6em #535353 , -6em 6em #535353 , 4em 6em #535353 , 5em 6em #535353 , 6em 6em #535353 , 7em 6em #535353 , 8em 6em #535353 , 9em 6em #535353 , 10em 6em #535353 , 11em 6em #535353 , 12em 6em #535353, -12em 8em #535353 , -11em 8em #535353 , -10em 8em #535353, -4em 9em #535353 , -3em 9em #535353, 10em 10em #535353 , 11em 10em #535353, -6em 11em #535353 , -5em 11em #535353;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
@-webkit-keyframes dino {
|
|
273
|
+
0% {
|
|
274
|
+
box-shadow: 2em -10em #535353 , 3em -10em #535353 , 4em -10em #535353 , 5em -10em #535353 , 6em -10em #535353 , 7em -10em #535353 , 8em -10em #535353 , 9em -10em #535353, 1em -9em #535353 , 2em -9em #535353 , 4em -9em #535353 , 5em -9em #535353 , 6em -9em #535353 , 7em -9em #535353 , 8em -9em #535353 , 9em -9em #535353 , 10em -9em #535353, 1em -8em #535353 , 2em -8em #535353 , 3em -8em #535353 , 4em -8em #535353 , 5em -8em #535353 , 6em -8em #535353 , 7em -8em #535353 , 8em -8em #535353 , 9em -8em #535353 , 10em -8em #535353, 1em -7em #535353 , 2em -7em #535353 , 3em -7em #535353 , 4em -7em #535353 , 5em -7em #535353 , 6em -7em #535353 , 7em -7em #535353 , 8em -7em #535353 , 9em -7em #535353 , 10em -7em #535353, 1em -6em #535353 , 2em -6em #535353 , 3em -6em #535353 , 4em -6em #535353 , 5em -6em #535353 , 6em -6em #535353 , 7em -6em #535353 , 8em -6em #535353 , 9em -6em #535353 , 10em -6em #535353, 1em -5em #535353 , 2em -5em #535353 , 3em -5em #535353 , 4em -5em #535353 , 5em -5em #535353, 0em -4em #535353 , 1em -4em #535353 , 2em -4em #535353 , 3em -4em #535353 , 4em -4em #535353 , 5em -4em #535353, -9em -3em #535353 , -3em -3em #535353 , -2em -3em #535353 , -1em -3em #535353 , 0em -3em #535353 , 1em -3em #535353 , 2em -3em #535353 , 3em -3em #535353 , 4em -3em #535353, -9em -2em #535353 , -2em -2em #535353 , -1em -2em #535353 , 0em -2em #535353 , 1em -2em #535353 , 2em -2em #535353 , 3em -2em #535353 , 4em -2em #535353, -9em -1em #535353 , -8em -1em #535353 , -3em -1em #535353 , -2em -1em #535353 , -1em -1em #535353 , 0em -1em #535353 , 1em -1em #535353 , 2em -1em #535353 , 3em -1em #535353 , 4em -1em #535353 , 5em -1em #535353 , 6em -1em #535353, -9em 0em #535353 , -8em 0em #535353 , -7em 0em #535353 , -4em 0em #535353 , -3em 0em #535353 , -2em 0em #535353 , -1em 0em #535353 , 0em 0em #535353 , 1em 0em #535353 , 2em 0em #535353 , 3em 0em #535353 , 4em 0em #535353 , 6em 0em #535353, -9em 1em #535353 , -8em 1em #535353 , -7em 1em #535353 , -6em 1em #535353 , -5em 1em #535353 , -4em 1em #535353 , -3em 1em #535353 , -2em 1em #535353 , -1em 1em #535353 , 0em 1em #535353 , 1em 1em #535353 , 2em 1em #535353 , 3em 1em #535353 , 4em 1em #535353, -8em 2em #535353 , -7em 2em #535353 , -6em 2em #535353 , -5em 2em #535353 , -4em 2em #535353 , -3em 2em #535353 , -2em 2em #535353 , -1em 2em #535353 , 0em 2em #535353 , 1em 2em #535353 , 2em 2em #535353 , 3em 2em #535353 , 4em 2em #535353, -7em 3em #535353 , -6em 3em #535353 , -5em 3em #535353 , -4em 3em #535353 , -3em 3em #535353 , -2em 3em #535353 , -1em 3em #535353 , 0em 3em #535353 , 1em 3em #535353 , 2em 3em #535353 , 3em 3em #535353, -6em 4em #535353 , -5em 4em #535353 , -4em 4em #535353 , -3em 4em #535353 , -2em 4em #535353 , -1em 4em #535353 , 0em 4em #535353 , 1em 4em #535353 , 2em 4em #535353, -5em 5em #535353 , -4em 5em #535353 , -3em 5em #535353 , -2em 5em #535353 , -1em 5em #535353 , 0em 5em #535353 , 1em 5em #535353, -4em 6em #535353 , -3em 6em #535353 , 0em 6em #535353 , 1em 6em #535353, -3em 7em #535353 , -2em 7em #535353 , 1em 7em #535353, 1em 8em #535353, 1em 9em #535353 , 2em 9em #535353;
|
|
275
|
+
}
|
|
276
|
+
50% {
|
|
277
|
+
box-shadow: 2em -10em #535353 , 3em -10em #535353 , 4em -10em #535353 , 5em -10em #535353 , 6em -10em #535353 , 7em -10em #535353 , 8em -10em #535353 , 9em -10em #535353, 1em -9em #535353 , 2em -9em #535353 , 4em -9em #535353 , 5em -9em #535353 , 6em -9em #535353 , 7em -9em #535353 , 8em -9em #535353 , 9em -9em #535353 , 10em -9em #535353, 1em -8em #535353 , 2em -8em #535353 , 3em -8em #535353 , 4em -8em #535353 , 5em -8em #535353 , 6em -8em #535353 , 7em -8em #535353 , 8em -8em #535353 , 9em -8em #535353 , 10em -8em #535353, 1em -7em #535353 , 2em -7em #535353 , 3em -7em #535353 , 4em -7em #535353 , 5em -7em #535353 , 6em -7em #535353 , 7em -7em #535353 , 8em -7em #535353 , 9em -7em #535353 , 10em -7em #535353, 1em -6em #535353 , 2em -6em #535353 , 3em -6em #535353 , 4em -6em #535353 , 5em -6em #535353 , 6em -6em #535353 , 7em -6em #535353 , 8em -6em #535353 , 9em -6em #535353 , 10em -6em #535353, 1em -5em #535353 , 2em -5em #535353 , 3em -5em #535353 , 4em -5em #535353 , 5em -5em #535353, -3em -4em #535353 , -2em -4em #535353 , 0em -4em #535353 , 1em -4em #535353 , 2em -4em #535353 , 3em -4em #535353 , 4em -4em #535353 , 5em -4em #535353, -9em -3em #535353 , -2em -3em #535353 , -1em -3em #535353 , 0em -3em #535353 , 1em -3em #535353 , 2em -3em #535353 , 3em -3em #535353 , 4em -3em #535353, -9em -2em #535353 , -2em -2em #535353 , -1em -2em #535353 , 0em -2em #535353 , 1em -2em #535353 , 2em -2em #535353 , 3em -2em #535353 , 4em -2em #535353, -9em -1em #535353 , -8em -1em #535353 , -3em -1em #535353 , -2em -1em #535353 , -1em -1em #535353 , 0em -1em #535353 , 1em -1em #535353 , 2em -1em #535353 , 3em -1em #535353 , 4em -1em #535353, -9em 0em #535353 , -8em 0em #535353 , -7em 0em #535353 , -4em 0em #535353 , -3em 0em #535353 , -2em 0em #535353 , -1em 0em #535353 , 0em 0em #535353 , 1em 0em #535353 , 2em 0em #535353 , 3em 0em #535353 , 4em 0em #535353 , 5em 0em #535353 , 6em 0em #535353, -9em 1em #535353 , -8em 1em #535353 , -7em 1em #535353 , -6em 1em #535353 , -5em 1em #535353 , -4em 1em #535353 , -3em 1em #535353 , -2em 1em #535353 , -1em 1em #535353 , 0em 1em #535353 , 1em 1em #535353 , 2em 1em #535353 , 3em 1em #535353 , 4em 1em #535353 , 6em 1em #535353, -8em 2em #535353 , -7em 2em #535353 , -6em 2em #535353 , -5em 2em #535353 , -4em 2em #535353 , -3em 2em #535353 , -2em 2em #535353 , -1em 2em #535353 , 0em 2em #535353 , 1em 2em #535353 , 2em 2em #535353 , 3em 2em #535353 , 4em 2em #535353, -7em 3em #535353 , -6em 3em #535353 , -5em 3em #535353 , -4em 3em #535353 , -3em 3em #535353 , -2em 3em #535353 , -1em 3em #535353 , 0em 3em #535353 , 1em 3em #535353 , 2em 3em #535353 , 3em 3em #535353, -6em 4em #535353 , -5em 4em #535353 , -4em 4em #535353 , -3em 4em #535353 , -2em 4em #535353 , -1em 4em #535353 , 0em 4em #535353 , 1em 4em #535353 , 2em 4em #535353, -5em 5em #535353 , -4em 5em #535353 , -3em 5em #535353 , -2em 5em #535353 , -1em 5em #535353 , 0em 5em #535353 , 1em 5em #535353, -4em 6em #535353 , -3em 6em #535353 , -2em 6em #535353 , 1em 6em #535353 , 2em 6em #535353, -4em 7em #535353 , -3em 7em #535353, -4em 8em #535353, -4em 9em #535353 , -3em 9em #535353;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
@-moz-keyframes dino {
|
|
281
|
+
0% {
|
|
282
|
+
box-shadow: 2em -10em #535353 , 3em -10em #535353 , 4em -10em #535353 , 5em -10em #535353 , 6em -10em #535353 , 7em -10em #535353 , 8em -10em #535353 , 9em -10em #535353, 1em -9em #535353 , 2em -9em #535353 , 4em -9em #535353 , 5em -9em #535353 , 6em -9em #535353 , 7em -9em #535353 , 8em -9em #535353 , 9em -9em #535353 , 10em -9em #535353, 1em -8em #535353 , 2em -8em #535353 , 3em -8em #535353 , 4em -8em #535353 , 5em -8em #535353 , 6em -8em #535353 , 7em -8em #535353 , 8em -8em #535353 , 9em -8em #535353 , 10em -8em #535353, 1em -7em #535353 , 2em -7em #535353 , 3em -7em #535353 , 4em -7em #535353 , 5em -7em #535353 , 6em -7em #535353 , 7em -7em #535353 , 8em -7em #535353 , 9em -7em #535353 , 10em -7em #535353, 1em -6em #535353 , 2em -6em #535353 , 3em -6em #535353 , 4em -6em #535353 , 5em -6em #535353 , 6em -6em #535353 , 7em -6em #535353 , 8em -6em #535353 , 9em -6em #535353 , 10em -6em #535353, 1em -5em #535353 , 2em -5em #535353 , 3em -5em #535353 , 4em -5em #535353 , 5em -5em #535353, 0em -4em #535353 , 1em -4em #535353 , 2em -4em #535353 , 3em -4em #535353 , 4em -4em #535353 , 5em -4em #535353, -9em -3em #535353 , -3em -3em #535353 , -2em -3em #535353 , -1em -3em #535353 , 0em -3em #535353 , 1em -3em #535353 , 2em -3em #535353 , 3em -3em #535353 , 4em -3em #535353, -9em -2em #535353 , -2em -2em #535353 , -1em -2em #535353 , 0em -2em #535353 , 1em -2em #535353 , 2em -2em #535353 , 3em -2em #535353 , 4em -2em #535353, -9em -1em #535353 , -8em -1em #535353 , -3em -1em #535353 , -2em -1em #535353 , -1em -1em #535353 , 0em -1em #535353 , 1em -1em #535353 , 2em -1em #535353 , 3em -1em #535353 , 4em -1em #535353 , 5em -1em #535353 , 6em -1em #535353, -9em 0em #535353 , -8em 0em #535353 , -7em 0em #535353 , -4em 0em #535353 , -3em 0em #535353 , -2em 0em #535353 , -1em 0em #535353 , 0em 0em #535353 , 1em 0em #535353 , 2em 0em #535353 , 3em 0em #535353 , 4em 0em #535353 , 6em 0em #535353, -9em 1em #535353 , -8em 1em #535353 , -7em 1em #535353 , -6em 1em #535353 , -5em 1em #535353 , -4em 1em #535353 , -3em 1em #535353 , -2em 1em #535353 , -1em 1em #535353 , 0em 1em #535353 , 1em 1em #535353 , 2em 1em #535353 , 3em 1em #535353 , 4em 1em #535353, -8em 2em #535353 , -7em 2em #535353 , -6em 2em #535353 , -5em 2em #535353 , -4em 2em #535353 , -3em 2em #535353 , -2em 2em #535353 , -1em 2em #535353 , 0em 2em #535353 , 1em 2em #535353 , 2em 2em #535353 , 3em 2em #535353 , 4em 2em #535353, -7em 3em #535353 , -6em 3em #535353 , -5em 3em #535353 , -4em 3em #535353 , -3em 3em #535353 , -2em 3em #535353 , -1em 3em #535353 , 0em 3em #535353 , 1em 3em #535353 , 2em 3em #535353 , 3em 3em #535353, -6em 4em #535353 , -5em 4em #535353 , -4em 4em #535353 , -3em 4em #535353 , -2em 4em #535353 , -1em 4em #535353 , 0em 4em #535353 , 1em 4em #535353 , 2em 4em #535353, -5em 5em #535353 , -4em 5em #535353 , -3em 5em #535353 , -2em 5em #535353 , -1em 5em #535353 , 0em 5em #535353 , 1em 5em #535353, -4em 6em #535353 , -3em 6em #535353 , 0em 6em #535353 , 1em 6em #535353, -3em 7em #535353 , -2em 7em #535353 , 1em 7em #535353, 1em 8em #535353, 1em 9em #535353 , 2em 9em #535353;
|
|
283
|
+
}
|
|
284
|
+
50% {
|
|
285
|
+
box-shadow: 2em -10em #535353 , 3em -10em #535353 , 4em -10em #535353 , 5em -10em #535353 , 6em -10em #535353 , 7em -10em #535353 , 8em -10em #535353 , 9em -10em #535353, 1em -9em #535353 , 2em -9em #535353 , 4em -9em #535353 , 5em -9em #535353 , 6em -9em #535353 , 7em -9em #535353 , 8em -9em #535353 , 9em -9em #535353 , 10em -9em #535353, 1em -8em #535353 , 2em -8em #535353 , 3em -8em #535353 , 4em -8em #535353 , 5em -8em #535353 , 6em -8em #535353 , 7em -8em #535353 , 8em -8em #535353 , 9em -8em #535353 , 10em -8em #535353, 1em -7em #535353 , 2em -7em #535353 , 3em -7em #535353 , 4em -7em #535353 , 5em -7em #535353 , 6em -7em #535353 , 7em -7em #535353 , 8em -7em #535353 , 9em -7em #535353 , 10em -7em #535353, 1em -6em #535353 , 2em -6em #535353 , 3em -6em #535353 , 4em -6em #535353 , 5em -6em #535353 , 6em -6em #535353 , 7em -6em #535353 , 8em -6em #535353 , 9em -6em #535353 , 10em -6em #535353, 1em -5em #535353 , 2em -5em #535353 , 3em -5em #535353 , 4em -5em #535353 , 5em -5em #535353, -3em -4em #535353 , -2em -4em #535353 , 0em -4em #535353 , 1em -4em #535353 , 2em -4em #535353 , 3em -4em #535353 , 4em -4em #535353 , 5em -4em #535353, -9em -3em #535353 , -2em -3em #535353 , -1em -3em #535353 , 0em -3em #535353 , 1em -3em #535353 , 2em -3em #535353 , 3em -3em #535353 , 4em -3em #535353, -9em -2em #535353 , -2em -2em #535353 , -1em -2em #535353 , 0em -2em #535353 , 1em -2em #535353 , 2em -2em #535353 , 3em -2em #535353 , 4em -2em #535353, -9em -1em #535353 , -8em -1em #535353 , -3em -1em #535353 , -2em -1em #535353 , -1em -1em #535353 , 0em -1em #535353 , 1em -1em #535353 , 2em -1em #535353 , 3em -1em #535353 , 4em -1em #535353, -9em 0em #535353 , -8em 0em #535353 , -7em 0em #535353 , -4em 0em #535353 , -3em 0em #535353 , -2em 0em #535353 , -1em 0em #535353 , 0em 0em #535353 , 1em 0em #535353 , 2em 0em #535353 , 3em 0em #535353 , 4em 0em #535353 , 5em 0em #535353 , 6em 0em #535353, -9em 1em #535353 , -8em 1em #535353 , -7em 1em #535353 , -6em 1em #535353 , -5em 1em #535353 , -4em 1em #535353 , -3em 1em #535353 , -2em 1em #535353 , -1em 1em #535353 , 0em 1em #535353 , 1em 1em #535353 , 2em 1em #535353 , 3em 1em #535353 , 4em 1em #535353 , 6em 1em #535353, -8em 2em #535353 , -7em 2em #535353 , -6em 2em #535353 , -5em 2em #535353 , -4em 2em #535353 , -3em 2em #535353 , -2em 2em #535353 , -1em 2em #535353 , 0em 2em #535353 , 1em 2em #535353 , 2em 2em #535353 , 3em 2em #535353 , 4em 2em #535353, -7em 3em #535353 , -6em 3em #535353 , -5em 3em #535353 , -4em 3em #535353 , -3em 3em #535353 , -2em 3em #535353 , -1em 3em #535353 , 0em 3em #535353 , 1em 3em #535353 , 2em 3em #535353 , 3em 3em #535353, -6em 4em #535353 , -5em 4em #535353 , -4em 4em #535353 , -3em 4em #535353 , -2em 4em #535353 , -1em 4em #535353 , 0em 4em #535353 , 1em 4em #535353 , 2em 4em #535353, -5em 5em #535353 , -4em 5em #535353 , -3em 5em #535353 , -2em 5em #535353 , -1em 5em #535353 , 0em 5em #535353 , 1em 5em #535353, -4em 6em #535353 , -3em 6em #535353 , -2em 6em #535353 , 1em 6em #535353 , 2em 6em #535353, -4em 7em #535353 , -3em 7em #535353, -4em 8em #535353, -4em 9em #535353 , -3em 9em #535353;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
@keyframes dino {
|
|
289
|
+
0% {
|
|
290
|
+
box-shadow: 2em -10em #535353,
|
|
291
|
+
3em -10em #535353,
|
|
292
|
+
4em -10em #535353,
|
|
293
|
+
5em -10em #535353,
|
|
294
|
+
6em -10em #535353,
|
|
295
|
+
7em -10em #535353,
|
|
296
|
+
8em -10em #535353 , 9em -10em #535353, 1em -9em #535353 , 2em -9em #535353 , 4em -9em #535353 , 5em -9em #535353 , 6em -9em #535353 , 7em -9em #535353 , 8em -9em #535353 , 9em -9em #535353 , 10em -9em #535353, 1em -8em #535353 , 2em -8em #535353 , 3em -8em #535353 , 4em -8em #535353 , 5em -8em #535353 , 6em -8em #535353 , 7em -8em #535353 , 8em -8em #535353 , 9em -8em #535353 , 10em -8em #535353, 1em -7em #535353 , 2em -7em #535353 , 3em -7em #535353 , 4em -7em #535353 , 5em -7em #535353 , 6em -7em #535353 , 7em -7em #535353 , 8em -7em #535353 , 9em -7em #535353 , 10em -7em #535353, 1em -6em #535353 , 2em -6em #535353 , 3em -6em #535353 , 4em -6em #535353 , 5em -6em #535353 , 6em -6em #535353 , 7em -6em #535353 , 8em -6em #535353 , 9em -6em #535353 , 10em -6em #535353, 1em -5em #535353 , 2em -5em #535353 , 3em -5em #535353 , 4em -5em #535353 , 5em -5em #535353, 0em -4em #535353 , 1em -4em #535353 , 2em -4em #535353 , 3em -4em #535353 , 4em -4em #535353 , 5em -4em #535353, -9em -3em #535353 , -3em -3em #535353 , -2em -3em #535353 , -1em -3em #535353 , 0em -3em #535353 , 1em -3em #535353 , 2em -3em #535353 , 3em -3em #535353 , 4em -3em #535353, -9em -2em #535353 , -2em -2em #535353 , -1em -2em #535353 , 0em -2em #535353 , 1em -2em #535353 , 2em -2em #535353 , 3em -2em #535353 , 4em -2em #535353, -9em -1em #535353 , -8em -1em #535353 , -3em -1em #535353 , -2em -1em #535353 , -1em -1em #535353 , 0em -1em #535353 , 1em -1em #535353 , 2em -1em #535353 , 3em -1em #535353 , 4em -1em #535353 , 5em -1em #535353 , 6em -1em #535353, -9em 0em #535353 , -8em 0em #535353 , -7em 0em #535353 , -4em 0em #535353 , -3em 0em #535353 , -2em 0em #535353 , -1em 0em #535353 , 0em 0em #535353 , 1em 0em #535353 , 2em 0em #535353 , 3em 0em #535353 , 4em 0em #535353 , 6em 0em #535353, -9em 1em #535353 , -8em 1em #535353 , -7em 1em #535353 , -6em 1em #535353 , -5em 1em #535353 , -4em 1em #535353 , -3em 1em #535353 , -2em 1em #535353 , -1em 1em #535353 , 0em 1em #535353 , 1em 1em #535353 , 2em 1em #535353 , 3em 1em #535353 , 4em 1em #535353, -8em 2em #535353 , -7em 2em #535353 , -6em 2em #535353 , -5em 2em #535353 , -4em 2em #535353 , -3em 2em #535353 , -2em 2em #535353 , -1em 2em #535353 , 0em 2em #535353 , 1em 2em #535353 , 2em 2em #535353 , 3em 2em #535353 , 4em 2em #535353, -7em 3em #535353 , -6em 3em #535353 , -5em 3em #535353 , -4em 3em #535353 , -3em 3em #535353 , -2em 3em #535353 , -1em 3em #535353 , 0em 3em #535353 , 1em 3em #535353 , 2em 3em #535353 , 3em 3em #535353, -6em 4em #535353 , -5em 4em #535353 , -4em 4em #535353 , -3em 4em #535353 , -2em 4em #535353 , -1em 4em #535353 , 0em 4em #535353 , 1em 4em #535353 , 2em 4em #535353, -5em 5em #535353 , -4em 5em #535353 , -3em 5em #535353 , -2em 5em #535353 , -1em 5em #535353 , 0em 5em #535353 , 1em 5em #535353, -4em 6em #535353 , -3em 6em #535353 , 0em 6em #535353 , 1em 6em #535353, -3em 7em #535353 , -2em 7em #535353 , 1em 7em #535353, 1em 8em #535353, 1em 9em #535353 , 2em 9em #535353;
|
|
297
|
+
}
|
|
298
|
+
50% {
|
|
299
|
+
box-shadow: 2em -10em #535353,
|
|
300
|
+
3em -10em #535353,
|
|
301
|
+
4em -10em #535353,
|
|
302
|
+
5em -10em #535353,
|
|
303
|
+
6em -10em #535353,
|
|
304
|
+
7em -10em #535353,
|
|
305
|
+
8em -10em #535353,
|
|
306
|
+
9em -10em #535353,
|
|
307
|
+
1em -9em #535353,
|
|
308
|
+
2em -9em #535353,
|
|
309
|
+
4em -9em #535353,
|
|
310
|
+
5em -9em #535353,
|
|
311
|
+
6em -9em #535353,
|
|
312
|
+
7em -9em #535353,
|
|
313
|
+
8em -9em #535353,
|
|
314
|
+
9em -9em #535353,
|
|
315
|
+
10em -9em #535353,
|
|
316
|
+
1em -8em #535353,
|
|
317
|
+
2em -8em #535353,
|
|
318
|
+
3em -8em #535353,
|
|
319
|
+
4em -8em #535353,
|
|
320
|
+
5em -8em #535353,
|
|
321
|
+
6em -8em #535353,
|
|
322
|
+
7em -8em #535353,
|
|
323
|
+
8em -8em #535353,
|
|
324
|
+
9em -8em #535353,
|
|
325
|
+
10em -8em #535353,
|
|
326
|
+
1em -7em #535353,
|
|
327
|
+
2em -7em #535353,
|
|
328
|
+
3em -7em #535353,
|
|
329
|
+
4em -7em #535353,
|
|
330
|
+
5em -7em #535353,
|
|
331
|
+
6em -7em #535353,
|
|
332
|
+
7em -7em #535353,
|
|
333
|
+
8em -7em #535353,
|
|
334
|
+
9em -7em #535353,
|
|
335
|
+
10em -7em #535353,
|
|
336
|
+
1em -6em #535353,
|
|
337
|
+
2em -6em #535353,
|
|
338
|
+
3em -6em #535353,
|
|
339
|
+
4em -6em #535353,
|
|
340
|
+
5em -6em #535353,
|
|
341
|
+
6em -6em #535353,
|
|
342
|
+
7em -6em #535353,
|
|
343
|
+
8em -6em #535353,
|
|
344
|
+
9em -6em #535353,
|
|
345
|
+
10em -6em #535353,
|
|
346
|
+
1em -5em #535353,
|
|
347
|
+
2em -5em #535353,
|
|
348
|
+
3em -5em #535353,
|
|
349
|
+
4em -5em #535353,
|
|
350
|
+
5em -5em #535353,
|
|
351
|
+
-3em -4em #535353,
|
|
352
|
+
-2em -4em #535353,
|
|
353
|
+
0em -4em #535353,
|
|
354
|
+
1em -4em #535353,
|
|
355
|
+
2em -4em #535353,
|
|
356
|
+
3em -4em #535353,
|
|
357
|
+
4em -4em #535353,
|
|
358
|
+
5em -4em #535353,
|
|
359
|
+
-9em -3em #535353, -2em -3em #535353 , -1em -3em #535353 , 0em -3em #535353 , 1em -3em #535353 , 2em -3em #535353 , 3em -3em #535353 , 4em -3em #535353, -9em -2em #535353 , -2em -2em #535353 , -1em -2em #535353 , 0em -2em #535353 , 1em -2em #535353 , 2em -2em #535353 , 3em -2em #535353 , 4em -2em #535353, -9em -1em #535353 , -8em -1em #535353 , -3em -1em #535353 , -2em -1em #535353 , -1em -1em #535353 , 0em -1em #535353 , 1em -1em #535353 , 2em -1em #535353 , 3em -1em #535353 , 4em -1em #535353, -9em 0em #535353 , -8em 0em #535353 , -7em 0em #535353 , -4em 0em #535353 , -3em 0em #535353 , -2em 0em #535353 , -1em 0em #535353 , 0em 0em #535353 , 1em 0em #535353 , 2em 0em #535353 , 3em 0em #535353 , 4em 0em #535353 , 5em 0em #535353 , 6em 0em #535353, -9em 1em #535353 , -8em 1em #535353 , -7em 1em #535353 , -6em 1em #535353 , -5em 1em #535353 , -4em 1em #535353 , -3em 1em #535353 , -2em 1em #535353 , -1em 1em #535353 , 0em 1em #535353 , 1em 1em #535353 , 2em 1em #535353 , 3em 1em #535353 , 4em 1em #535353 , 6em 1em #535353, -8em 2em #535353 , -7em 2em #535353 , -6em 2em #535353 , -5em 2em #535353 , -4em 2em #535353 , -3em 2em #535353 , -2em 2em #535353 , -1em 2em #535353 , 0em 2em #535353 , 1em 2em #535353 , 2em 2em #535353 , 3em 2em #535353 , 4em 2em #535353, -7em 3em #535353 , -6em 3em #535353 , -5em 3em #535353 , -4em 3em #535353 , -3em 3em #535353 , -2em 3em #535353 , -1em 3em #535353 , 0em 3em #535353 , 1em 3em #535353 , 2em 3em #535353 , 3em 3em #535353, -6em 4em #535353 , -5em 4em #535353 , -4em 4em #535353 , -3em 4em #535353 , -2em 4em #535353 , -1em 4em #535353 , 0em 4em #535353 , 1em 4em #535353 , 2em 4em #535353, -5em 5em #535353 , -4em 5em #535353 , -3em 5em #535353 , -2em 5em #535353 , -1em 5em #535353 , 0em 5em #535353 , 1em 5em #535353, -4em 6em #535353 , -3em 6em #535353 , -2em 6em #535353 , 1em 6em #535353 , 2em 6em #535353, -4em 7em #535353 , -3em 7em #535353, -4em 8em #535353, -4em 9em #535353 , -3em 9em #535353;
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
body {
|
|
363
|
+
font-size: 7px;
|
|
364
|
+
background-color: #dddddd;
|
|
365
|
+
}
|
|
366
|
+
body > * {
|
|
367
|
+
background: #535353;
|
|
368
|
+
height: 0.5em;
|
|
369
|
+
position: absolute;
|
|
370
|
+
left: 50%;
|
|
371
|
+
top: 50%;
|
|
372
|
+
width: 0.5em;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.mouth_of_the_dinosaur,
|
|
376
|
+
.eye_of_the_dinosaur,
|
|
377
|
+
.dino {
|
|
378
|
+
width: 1em;
|
|
379
|
+
height: 1em;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.dino {
|
|
383
|
+
-webkit-animation: dino 0.25s both steps(1) infinite;
|
|
384
|
+
-moz-animation: dino 0.25s both steps(1) infinite;
|
|
385
|
+
animation: dino 0.25s both steps(1) infinite;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.eye_of_the_dinosaur {
|
|
389
|
+
-webkit-animation: eye 4s both steps(1) infinite;
|
|
390
|
+
-moz-animation: eye 4s both steps(1) infinite;
|
|
391
|
+
animation: eye 4s both steps(1) infinite;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.mouth_of_the_dinosaur {
|
|
395
|
+
-webkit-animation: mouth_of_the_dinosaur_animation 4s both steps(1) infinite;
|
|
396
|
+
-moz-animation: mouth_of_the_dinosaur_animation 4s both steps(1) infinite;
|
|
397
|
+
animation: mouth_of_the_dinosaur_animation 4s both steps(1) infinite;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.ground {
|
|
401
|
+
-webkit-animation: ground 0.5s both steps(1) infinite;
|
|
402
|
+
-moz-animation: ground 0.5s both steps(1) infinite;
|
|
403
|
+
animation: ground 0.5s both steps(1) infinite;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.comets {
|
|
407
|
+
-webkit-animation: comets_animation 0.5s both steps(1) infinite;
|
|
408
|
+
-moz-animation: comets_animation 0.5s both steps(1) infinite;
|
|
409
|
+
animation: comets_animation 0.5s both steps(1) infinite;
|
|
410
|
+
}
|
|
411
|
+
</style>
|
|
412
|
+
</head>
|
|
413
|
+
<body>
|
|
414
|
+
<div class='dino'></div>
|
|
415
|
+
<div class='eye_of_the_dinosaur'></div>
|
|
416
|
+
<div class='mouth_of_the_dinosaur'></div>
|
|
417
|
+
<div class='ground'></div>
|
|
418
|
+
<div class='comets'></div>
|
|
419
|
+
</body>
|
|
420
|
+
</html>
|