26 |
27 |
28 |
29 |
18 |
23 | 提示: 点击鼠标来提高速度
19 |
20 |
21 |
22 |
24 |
25 |
30 |
14 |
15 |
17 |
44 |
45 |
46 |
47 |
76 |
77 |
--------------------------------------------------------------------------------
/canvas/css/normalize.css:
--------------------------------------------------------------------------------
1 | article,
2 | aside,
3 | details,
4 | figcaption,
5 | figure,
6 | footer,
7 | header,
8 | hgroup,
9 | main,
10 | nav,
11 | section,
12 | summary {
13 | display: block;
14 | }
15 |
16 | audio,
17 | canvas,
18 | video {
19 | display: inline-block;
20 | }
21 |
22 | audio:not([controls]) {
23 | display: none;
24 | height: 0;
25 | }
26 |
27 | [hidden] {
28 | display: none;
29 | }
30 |
31 | html {
32 | font-family: sans-serif;
33 | -ms-text-size-adjust: 100%;
34 | -webkit-text-size-adjust: 100%;
35 | }
36 |
37 | body {
38 | margin: 0;
39 | }
40 |
41 | a:focus {
42 | outline: thin dotted;
43 | }
44 |
45 | a:active,
46 | a:hover {
47 | outline: 0;
48 | }
49 |
50 | h1 {
51 | font-size: 2em;
52 | margin: 0.67em 0;
53 | }
54 |
55 | abbr[title] {
56 | border-bottom: 1px dotted;
57 | }
58 |
59 | b,
60 | strong {
61 | font-weight: bold;
62 | }
63 |
64 | dfn {
65 | font-style: italic;
66 | }
67 |
68 | hr {
69 | -moz-box-sizing: content-box;
70 | box-sizing: content-box;
71 | height: 0;
72 | }
73 |
74 | mark {
75 | background: #ff0;
76 | color: #000;
77 | }
78 |
79 | code,
80 | kbd,
81 | pre,
82 | samp {
83 | font-family: monospace, serif;
84 | font-size: 1em;
85 | }
86 |
87 | pre {
88 | white-space: pre-wrap;
89 | }
90 |
91 | q {
92 | quotes: "\201C""\201D""\2018""\2019";
93 | }
94 |
95 | small {
96 | font-size: 80%;
97 | }
98 |
99 | sub,
100 | sup {
101 | font-size: 75%;
102 | line-height: 0;
103 | position: relative;
104 | vertical-align: baseline;
105 | }
106 |
107 | sup {
108 | top: -0.5em;
109 | }
110 |
111 | sub {
112 | bottom: -0.25em;
113 | }
114 |
115 | img {
116 | border: 0;
117 | }
118 |
119 | svg:not(:root) {
120 | overflow: hidden;
121 | }
122 |
123 | figure {
124 | margin: 0;
125 | }
126 |
127 | fieldset {
128 | border: 1px solid #c0c0c0;
129 | margin: 0 2px;
130 | padding: 0.35em 0.625em 0.75em;
131 | }
132 |
133 | legend {
134 | border: 0;
135 | padding: 0;
136 | }
137 |
138 | button,
139 | input,
140 | select,
141 | textarea {
142 | font-family: inherit;
143 | font-size: 100%;
144 | margin: 0;
145 | }
146 |
147 | button,
148 | input {
149 | line-height: normal;
150 | }
151 |
152 | button,
153 | select {
154 | text-transform: none;
155 | }
156 |
157 | button,
158 | html input[type="button"],
159 | input[type="reset"],
160 | input[type="submit"] {
161 | -webkit-appearance: button;
162 | cursor: pointer;
163 | }
164 |
165 | button[disabled],
166 | html input[disabled] {
167 | cursor: default;
168 | }
169 |
170 | input[type="checkbox"],
171 | input[type="radio"] {
172 | box-sizing: border-box;
173 | padding: 0;
174 | }
175 |
176 | input[type="search"] {
177 | -webkit-appearance: textfield;
178 | -moz-box-sizing: content-box;
179 | -webkit-box-sizing: content-box;
180 | box-sizing: content-box;
181 | }
182 |
183 | input[type="search"]::-webkit-search-cancel-button,
184 | input[type="search"]::-webkit-search-decoration {
185 | -webkit-appearance: none;
186 | }
187 |
188 | button::-moz-focus-inner,
189 | input::-moz-focus-inner {
190 | border: 0;
191 | padding: 0;
192 | }
193 |
194 | textarea {
195 | overflow: auto;
196 | vertical-align: top;
197 | }
198 |
199 | table {
200 | border-collapse: collapse;
201 | border-spacing: 0;
202 | }
--------------------------------------------------------------------------------
/h5game/css/game.css:
--------------------------------------------------------------------------------
1 | /*================================================
2 |
3 | General
4 |
5 | ================================================*/
6 |
7 | * {
8 | box-sizing: border-box;
9 | }
10 |
11 | html,
12 | body {
13 | background-color: #000;
14 | height: 100%;
15 | }
16 |
17 | body {
18 | background: #222;
19 | background: -webkit-radial-gradient(#333, #111);
20 | background: radial-gradient(#333, #111);
21 | background-position: center center;
22 | background-repeat: no-repeat;
23 | background-size: cover;
24 | color: #fff;
25 | font: 100%/1.5 sans-serif;
26 | overflow: hidden;
27 | }
28 |
29 | /*================================================
30 |
31 | Score
32 |
33 | ================================================*/
34 |
35 | .score {
36 | color: rgba(255, 255, 255, 0.5);
37 | font-size: 16px;
38 | font-weight: bold;
39 | padding-top: 5px;
40 | text-align: center;
41 | }
42 |
43 | /*================================================
44 |
45 | Stage
46 |
47 | ================================================*/
48 |
49 | .stage {
50 | bottom: 0;
51 | left: 0;
52 | margin: auto;
53 | position: absolute;
54 | right: 0;
55 | top: 0;
56 | z-index: 2;
57 | }
58 |
59 | /*================================================
60 |
61 | Tiles
62 |
63 | ================================================*/
64 |
65 | .tile {
66 | background: rgba(0, 0, 0, 0.15);
67 | position: absolute;
68 | -webkit-transition-property:
69 | background,
70 | box-shadow,
71 | opacity,
72 | -webkit-transform
73 | ;
74 | transition-property:
75 | background,
76 | box-shadow,
77 | opacity,
78 | transform
79 | ;
80 | -webkit-transform: translateZ(0);
81 | transform: translateZ(0);
82 | -webkit-transition-duration: 3000ms;
83 | transition-duration: 3000ms;
84 | }
85 |
86 | .tile:before {
87 | bottom: 0;
88 | content: '';
89 | height: 0;
90 | left: 0;
91 | margin: auto;
92 | opacity: 0;
93 | position: absolute;
94 | right: 0;
95 | top: 0;
96 | width: 0;
97 | -webkit-transition: opacity 300ms;
98 | transition: opacity 300ms;
99 | }
100 |
101 | .tile.path:before {
102 | opacity: 1;
103 | }
104 |
105 | .tile.up:before {
106 | border-bottom: 4px inset rgba(255, 255, 255, 0.15);
107 | border-left: 4px solid transparent;
108 | border-right: 4px solid transparent;
109 | }
110 |
111 | .tile.down:before {
112 | border-top: 4px inset rgba(255, 255, 255, 0.15);
113 | border-left: 4px solid transparent;
114 | border-right: 4px solid transparent;
115 | }
116 |
117 | .tile.left:before {
118 | border-right: 4px inset rgba(255, 255, 255, 0.15);
119 | border-top: 4px solid transparent;
120 | border-bottom: 4px solid transparent;
121 | }
122 |
123 | .tile.right:before {
124 | border-left: 4px inset rgba(255, 255, 255, 0.15);
125 | border-top: 4px solid transparent;
126 | border-bottom: 4px solid transparent;
127 | }
128 |
129 | @media (max-width: 900px), (max-height: 900px) {
130 | .tile.up:before,
131 | .tile.down:before,
132 | .tile.left:before,
133 | .tile.right:before {
134 | border-width: 3px;
135 | }
136 | }
137 |
138 | @media (max-width: 500px), (max-height: 500px) {
139 | .tile.up:before,
140 | .tile.down:before,
141 | .tile.left:before,
142 | .tile.right:before {
143 | border-width: 2px;
144 | }
145 | }
146 |
147 | .tile.pressed {
148 | background: rgba(0, 0, 0, 0.3);
149 | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
150 | -webkit-transition-duration: 0ms;
151 | transition-duration: 0ms;
152 | }
--------------------------------------------------------------------------------
/threejs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | jquery横向手风琴效果
16 |
18 |
43 | -
19 |
-
20 |
21 |
22 |
23 | -
24 |
25 |
26 |
27 | -
28 |
29 |
30 |
31 | -
32 |
33 |
34 |
35 | -
36 |
37 |
38 |
39 |
40 |
129 |
130 |
136 |
184 |
185 |
186 |
--------------------------------------------------------------------------------
/translate/css/htmleaf-demo.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icomoon';
3 | src:url('../fonts/icomoon.eot?rretjt');
4 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
5 | url('../fonts/icomoon.woff?rretjt') format('woff'),
6 | url('../fonts/icomoon.ttf?rretjt') format('truetype'),
7 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | [class^="icon-"], [class*=" icon-"] {
13 | font-family: 'icomoon';
14 | speak: none;
15 | font-style: normal;
16 | font-weight: normal;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 |
21 | /* Better Font Rendering =========== */
22 | -webkit-font-smoothing: antialiased;
23 | -moz-osx-font-smoothing: grayscale;
24 | }
25 |
26 | body, html { font-size: 100%; padding: 0; margin: 0;}
27 |
28 | /* Reset */
29 | *,
30 | *:after,
31 | *:before {
32 | -webkit-box-sizing: border-box;
33 | -moz-box-sizing: border-box;
34 | box-sizing: border-box;
35 | }
36 |
37 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
38 | .clearfix:before,
39 | .clearfix:after {
40 | content: " ";
41 | display: table;
42 | }
43 |
44 | .clearfix:after {
45 | clear: both;
46 | }
47 |
48 | body{
49 | background: #494A5F;
50 | color: #D5D6E2;
51 | font-weight: 500;
52 | font-size: 1.05em;
53 | font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
54 | }
55 | a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
56 | a:hover,a:focus{color:#74777b;text-decoration: none;}
57 | .htmleaf-container{
58 | margin: 0 auto;
59 | }
60 |
61 | .bgcolor-1 { background: #f0efee; }
62 | .bgcolor-2 { background: #f9f9f9; }
63 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/
64 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
65 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
66 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/
67 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/
68 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
69 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
70 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
71 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
72 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
73 | .bgcolor-20{ background: #494A5F;color: #D5D6E2;}
74 | /* Header */
75 | .htmleaf-header{
76 | padding: 1em 190px 1em;
77 | letter-spacing: -1px;
78 | text-align: center;
79 | background: #66677c;
80 | }
81 | .htmleaf-header h1 {
82 | color: #D5D6E2;
83 | font-weight: 600;
84 | font-size: 2em;
85 | line-height: 1;
86 | margin-bottom: 0;
87 | }
88 | .htmleaf-header h1 span {
89 | display: block;
90 | font-size: 60%;
91 | font-weight: 400;
92 | padding: 0.8em 0 0.5em 0;
93 | color: #c3c8cd;
94 | }
95 | /*nav*/
96 | .htmleaf-demo a{color: #fff;text-decoration: none;}
97 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
98 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
99 | .htmleaf-demo a:hover{opacity: 0.6;}
100 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; }
101 | /* Top Navigation Style */
102 | .htmleaf-links {
103 | position: relative;
104 | display: inline-block;
105 | white-space: nowrap;
106 | font-size: 1.5em;
107 | text-align: center;
108 | }
109 |
110 | .htmleaf-links::after {
111 | position: absolute;
112 | top: 0;
113 | left: 50%;
114 | margin-left: -1px;
115 | width: 2px;
116 | height: 100%;
117 | background: #dbdbdb;
118 | content: '';
119 | -webkit-transform: rotate3d(0,0,1,22.5deg);
120 | transform: rotate3d(0,0,1,22.5deg);
121 | }
122 |
123 | .htmleaf-icon {
124 | display: inline-block;
125 | margin: 0.5em;
126 | padding: 0em 0;
127 | width: 1.5em;
128 | text-decoration: none;
129 | }
130 |
131 | .htmleaf-icon span {
132 | display: none;
133 | }
134 |
135 | .htmleaf-icon:before {
136 | margin: 0 5px;
137 | text-transform: none;
138 | font-weight: normal;
139 | font-style: normal;
140 | font-variant: normal;
141 | font-family: 'icomoon';
142 | line-height: 1;
143 | speak: none;
144 | -webkit-font-smoothing: antialiased;
145 | }
146 | /* footer */
147 | .htmleaf-footer{width: 100%;padding-top: 10px;}
148 | .htmleaf-small{font-size: 0.8em;}
149 | .center{text-align: center;}
150 | /****/
151 | .related {
152 | color: #fff;
153 | background: #494A5F;
154 | text-align: center;
155 | font-size: 1.25em;
156 | padding: 0.5em 0;
157 | overflow: hidden;
158 | }
159 |
160 | .related > a {
161 | vertical-align: top;
162 | width: calc(100% - 20px);
163 | max-width: 340px;
164 | display: inline-block;
165 | text-align: center;
166 | margin: 20px 10px;
167 | padding: 25px;
168 | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
169 | }
170 | .related a {
171 | display: inline-block;
172 | text-align: left;
173 | margin: 20px auto;
174 | padding: 10px 20px;
175 | opacity: 0.8;
176 | -webkit-transition: opacity 0.3s;
177 | transition: opacity 0.3s;
178 | -webkit-backface-visibility: hidden;
179 | }
180 |
181 | .related a:hover,
182 | .related a:active {
183 | opacity: 1;
184 | }
185 |
186 | .related a img {
187 | max-width: 100%;
188 | opacity: 0.8;
189 | border-radius: 4px;
190 | }
191 | .related a:hover img,
192 | .related a:active img {
193 | opacity: 1;
194 | }
195 | .related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em}
196 | .related a h3 {
197 | font-size: 0.85em;
198 | font-weight: 300;
199 | margin-top: 0.15em;
200 | color: #fff;
201 | }
202 | /* icomoon */
203 | .icon-htmleaf-home-outline:before {
204 | content: "\e5000";
205 | }
206 |
207 | .icon-htmleaf-arrow-forward-outline:before {
208 | content: "\e5001";
209 | }
210 |
211 | @media screen and (max-width: 1024px) {
212 | .htmleaf-header {
213 | padding: 2em 10% 2em;
214 | }
215 | .htmleaf-header h1 {
216 | font-size:1.4em;
217 | }
218 | .htmleaf-links{font-size: 1.4em}
219 | }
220 |
221 | @media screen and (max-width: 960px) {
222 | .htmleaf-header {
223 | padding: 2em 10% 2em;
224 | }
225 | .htmleaf-header h1 {
226 | font-size:1.2em;
227 | }
228 | .htmleaf-links{font-size: 1.2em}
229 | .related h3{font-size: 1em;}
230 | .related a h3 {
231 | font-size: 0.8em;
232 | }
233 | }
234 |
235 | @media screen and (max-width: 766px) {
236 | .htmleaf-header h1 {
237 | font-size:1.3em;
238 | }
239 | .htmleaf-links{font-size: 1.3em}
240 | }
241 |
242 | @media screen and (max-width: 640px) {
243 | .htmleaf-header {
244 | padding: 2em 10% 2em;
245 | }
246 | .htmleaf-header h1 {
247 | font-size:1em;
248 | }
249 | .htmleaf-links{font-size: 1em}
250 | .related h3{font-size: 0.8em;}
251 | .related a h3 {
252 | font-size: 0.6em;
253 | }
254 | }
--------------------------------------------------------------------------------
/jQuery手风琴/css/htmleaf-demo.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icomoon';
3 | src:url('../fonts/icomoon.eot?rretjt');
4 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
5 | url('../fonts/icomoon.woff?rretjt') format('woff'),
6 | url('../fonts/icomoon.ttf?rretjt') format('truetype'),
7 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | [class^="icon-"], [class*=" icon-"] {
13 | font-family: 'icomoon';
14 | speak: none;
15 | font-style: normal;
16 | font-weight: normal;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 |
21 | /* Better Font Rendering =========== */
22 | -webkit-font-smoothing: antialiased;
23 | -moz-osx-font-smoothing: grayscale;
24 | }
25 |
26 | body, html { font-size: 100%; padding: 0; margin: 0;}
27 |
28 | /* Reset */
29 | *,
30 | *:after,
31 | *:before {
32 | -webkit-box-sizing: border-box;
33 | -moz-box-sizing: border-box;
34 | box-sizing: border-box;
35 | }
36 |
37 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
38 | .clearfix:before,
39 | .clearfix:after {
40 | content: " ";
41 | display: table;
42 | }
43 |
44 | .clearfix:after {
45 | clear: both;
46 | }
47 |
48 | body{
49 | background: #494A5F;
50 | color: #D5D6E2;
51 | font-weight: 500;
52 | font-size: 1.05em;
53 | font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
54 | }
55 | .htmleaf-links a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
56 | .htmleaf-links a:hover,.htmleaf-links a:focus{color:#74777b;text-decoration: none;}
57 | .htmleaf-container{
58 | margin: 0 auto;
59 | }
60 |
61 | .bgcolor-1 { background: #f0efee; }
62 | .bgcolor-2 { background: #f9f9f9; }
63 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/
64 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
65 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
66 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/
67 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/
68 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
69 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
70 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
71 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
72 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
73 | .bgcolor-20{ background: #494A5F;color: #D5D6E2;}
74 | /* Header */
75 | .htmleaf-header{
76 | padding: 1em 190px 1em;
77 | letter-spacing: -1px;
78 | text-align: center;
79 | background: #66677c;
80 | }
81 | .htmleaf-header h1 {
82 | color: #D5D6E2;
83 | font-weight: 600;
84 | font-size: 2em;
85 | line-height: 1;
86 | margin-bottom: 0;
87 | }
88 | .htmleaf-header h1 span {
89 | display: block;
90 | font-size: 60%;
91 | font-weight: 400;
92 | padding: 0.8em 0 0.5em 0;
93 | color: #c3c8cd;
94 | }
95 | /*nav*/
96 | .htmleaf-demo a{color: #fff;text-decoration: none;}
97 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
98 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
99 | .htmleaf-demo a:hover{opacity: 0.6;}
100 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; }
101 | /* Top Navigation Style */
102 | .htmleaf-links {
103 | position: relative;
104 | display: inline-block;
105 | white-space: nowrap;
106 | font-size: 1.5em;
107 | text-align: center;
108 | }
109 |
110 | .htmleaf-links::after {
111 | position: absolute;
112 | top: 0;
113 | left: 50%;
114 | margin-left: -1px;
115 | width: 2px;
116 | height: 100%;
117 | background: #dbdbdb;
118 | content: '';
119 | -webkit-transform: rotate3d(0,0,1,22.5deg);
120 | transform: rotate3d(0,0,1,22.5deg);
121 | }
122 |
123 | .htmleaf-icon {
124 | display: inline-block;
125 | margin: 0.5em;
126 | padding: 0em 0;
127 | width: 1.5em;
128 | text-decoration: none;
129 | }
130 |
131 | .htmleaf-icon span {
132 | display: none;
133 | }
134 |
135 | .htmleaf-icon:before {
136 | margin: 0 5px;
137 | text-transform: none;
138 | font-weight: normal;
139 | font-style: normal;
140 | font-variant: normal;
141 | font-family: 'icomoon';
142 | line-height: 1;
143 | speak: none;
144 | -webkit-font-smoothing: antialiased;
145 | }
146 | /* footer */
147 | .htmleaf-footer{width: 100%;padding-top: 10px;}
148 | .htmleaf-small{font-size: 0.8em;}
149 | .center{text-align: center;}
150 | /****/
151 | .related {
152 | color: #fff;
153 | background: #494A5F;
154 | text-align: center;
155 | font-size: 1.25em;
156 | padding: 0.5em 0;
157 | overflow: hidden;
158 | }
159 |
160 | .related > a {
161 | vertical-align: top;
162 | width: calc(100% - 20px);
163 | max-width: 340px;
164 | display: inline-block;
165 | text-align: center;
166 | margin: 20px 10px;
167 | padding: 25px;
168 | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
169 | }
170 | .related a {
171 | display: inline-block;
172 | text-align: left;
173 | margin: 20px auto;
174 | padding: 10px 20px;
175 | opacity: 0.8;
176 | -webkit-transition: opacity 0.3s;
177 | transition: opacity 0.3s;
178 | -webkit-backface-visibility: hidden;
179 | text-decoration: none;
180 | }
181 |
182 | .related a:hover,
183 | .related a:active {
184 | opacity: 1;
185 | }
186 |
187 | .related a img {
188 | max-width: 100%;
189 | opacity: 0.8;
190 | border-radius: 4px;
191 | }
192 | .related a:hover img,
193 | .related a:active img {
194 | opacity: 1;
195 | }
196 | .related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em}
197 | .related a h3 {
198 | font-size: 0.85em;
199 | font-weight: 300;
200 | margin-top: 0.15em;
201 | color: #fff;
202 | }
203 | /* icomoon */
204 | .icon-htmleaf-home-outline:before {
205 | content: "\e5000";
206 | }
207 |
208 | .icon-htmleaf-arrow-forward-outline:before {
209 | content: "\e5001";
210 | }
211 |
212 | @media screen and (max-width: 1024px) {
213 | .htmleaf-header {
214 | padding: 2em 10% 2em;
215 | }
216 | .htmleaf-header h1 {
217 | font-size:1.4em;
218 | }
219 | .htmleaf-links{font-size: 1.4em}
220 | }
221 |
222 | @media screen and (max-width: 960px) {
223 | .htmleaf-header {
224 | padding: 2em 10% 2em;
225 | }
226 | .htmleaf-header h1 {
227 | font-size:1.2em;
228 | }
229 | .htmleaf-links{font-size: 1.2em}
230 | .related h3{font-size: 1em;}
231 | .related a h3 {
232 | font-size: 0.8em;
233 | }
234 | }
235 |
236 | @media screen and (max-width: 766px) {
237 | .htmleaf-header h1 {
238 | font-size:1.3em;
239 | }
240 | .htmleaf-links{font-size: 1.3em}
241 | }
242 |
243 | @media screen and (max-width: 640px) {
244 | .htmleaf-header {
245 | padding: 2em 10% 2em;
246 | }
247 | .htmleaf-header h1 {
248 | font-size:1em;
249 | }
250 | .htmleaf-links{font-size: 1em}
251 | .related h3{font-size: 0.8em;}
252 | .related a h3 {
253 | font-size: 0.6em;
254 | }
255 | }
--------------------------------------------------------------------------------
/h5game/css/default.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icomoon';
3 | src:url('../fonts/icomoon.eot?rretjt');
4 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
5 | url('../fonts/icomoon.woff?rretjt') format('woff'),
6 | url('../fonts/icomoon.ttf?rretjt') format('truetype'),
7 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | [class^="icon-"], [class*=" icon-"] {
13 | font-family: 'icomoon';
14 | speak: none;
15 | font-style: normal;
16 | font-weight: normal;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 |
21 | /* Better Font Rendering =========== */
22 | -webkit-font-smoothing: antialiased;
23 | -moz-osx-font-smoothing: grayscale;
24 | }
25 |
26 | body, html { font-size: 100%; padding: 0; margin: 0;}
27 |
28 | /* Reset */
29 | *,
30 | *:after,
31 | *:before {
32 | -webkit-box-sizing: border-box;
33 | -moz-box-sizing: border-box;
34 | box-sizing: border-box;
35 | }
36 |
37 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
38 | .clearfix:before,
39 | .clearfix:after {
40 | content: " ";
41 | display: table;
42 | }
43 |
44 | .clearfix:after {
45 | clear: both;
46 | }
47 |
48 | body{
49 | background: #f9f7f6;
50 | color: #404d5b;
51 | font-weight: 500;
52 | font-size: 1.05em;
53 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
54 | }
55 | a{color: #2fa0ec;text-decoration: none;outline: none;}
56 | a:hover,a:focus{color:#74777b;}
57 |
58 | .htmleaf-container{
59 | margin: 0 auto;
60 | text-align: center;
61 | overflow: hidden;
62 | }
63 | .htmleaf-content {
64 | font-size: 150%;
65 | padding: 1em 0;
66 | }
67 |
68 | .htmleaf-content h2 {
69 | margin: 0 0 2em;
70 | opacity: 0.1;
71 | }
72 |
73 | .htmleaf-content p {
74 | margin: 1em 0;
75 | padding: 5em 0 0 0;
76 | font-size: 0.65em;
77 | }
78 | .bgcolor-1 { background: #f0efee; }
79 | .bgcolor-2 { background: #f9f9f9; }
80 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/
81 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
82 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
83 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/
84 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/
85 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
86 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
87 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
88 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
89 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
90 | /* Header */
91 | .htmleaf-header{
92 | padding: 1em 190px 1em;
93 | letter-spacing: -1px;
94 | text-align: center;
95 | }
96 | .htmleaf-header h1 {
97 | font-weight: 600;
98 | font-size: 2em;
99 | line-height: 1;
100 | margin-bottom: 0;
101 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
102 | }
103 | .htmleaf-header h1 span {
104 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
105 | display: block;
106 | font-size: 60%;
107 | font-weight: 400;
108 | padding: 0.8em 0 0.5em 0;
109 | color: #c3c8cd;
110 | }
111 | /*nav*/
112 | .htmleaf-demo a{color: #1d7db1;text-decoration: none;}
113 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
114 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;}
115 | .htmleaf-demo a:hover{opacity: 0.6;}
116 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; }
117 | /* Top Navigation Style */
118 | .htmleaf-links {
119 | position: relative;
120 | display: inline-block;
121 | white-space: nowrap;
122 | font-size: 1.5em;
123 | text-align: center;
124 | }
125 |
126 | .htmleaf-links::after {
127 | position: absolute;
128 | top: 0;
129 | left: 50%;
130 | margin-left: -1px;
131 | width: 2px;
132 | height: 100%;
133 | background: #dbdbdb;
134 | content: '';
135 | -webkit-transform: rotate3d(0,0,1,22.5deg);
136 | transform: rotate3d(0,0,1,22.5deg);
137 | }
138 |
139 | .htmleaf-icon {
140 | display: inline-block;
141 | margin: 0.5em;
142 | padding: 0em 0;
143 | width: 1.5em;
144 | text-decoration: none;
145 | }
146 |
147 | .htmleaf-icon span {
148 | display: none;
149 | }
150 |
151 | .htmleaf-icon:before {
152 | margin: 0 5px;
153 | text-transform: none;
154 | font-weight: normal;
155 | font-style: normal;
156 | font-variant: normal;
157 | font-family: 'icomoon';
158 | line-height: 1;
159 | speak: none;
160 | -webkit-font-smoothing: antialiased;
161 | }
162 | /* footer */
163 | .htmleaf-footer{width: 100%;padding-top: 10px;}
164 | .htmleaf-small{font-size: 0.8em;}
165 | .center{text-align: center;}
166 | /****/
167 | .related {
168 | color: #fff;
169 | background: #333;
170 | text-align: center;
171 | font-size: 1.25em;
172 | padding: 0.5em 0;
173 | overflow: hidden;
174 | }
175 |
176 | .related > a {
177 | vertical-align: top;
178 | width: calc(100% - 20px);
179 | max-width: 340px;
180 | display: inline-block;
181 | text-align: center;
182 | margin: 20px 10px;
183 | padding: 25px;
184 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
185 | }
186 | .related a {
187 | display: inline-block;
188 | text-align: left;
189 | margin: 20px auto;
190 | padding: 10px 20px;
191 | opacity: 0.8;
192 | -webkit-transition: opacity 0.3s;
193 | transition: opacity 0.3s;
194 | -webkit-backface-visibility: hidden;
195 | }
196 |
197 | .related a:hover,
198 | .related a:active {
199 | opacity: 1;
200 | }
201 |
202 | .related a img {
203 | max-width: 100%;
204 | opacity: 0.8;
205 | border-radius: 4px;
206 | }
207 | .related a:hover img,
208 | .related a:active img {
209 | opacity: 1;
210 | }
211 | .related h3{font-family: "Microsoft YaHei", sans-serif;}
212 | .related a h3 {
213 | font-weight: 300;
214 | margin-top: 0.15em;
215 | color: #fff;
216 | }
217 | /* icomoon */
218 | .icon-htmleaf-home-outline:before {
219 | content: "\e5000";
220 | }
221 |
222 | .icon-htmleaf-arrow-forward-outline:before {
223 | content: "\e5001";
224 | }
225 |
226 | @media screen and (max-width: 50em) {
227 | .htmleaf-header {
228 | padding: 3em 10% 4em;
229 | }
230 | .htmleaf-header h1 {
231 | font-size:2em;
232 | }
233 | }
234 |
235 |
236 | @media screen and (max-width: 40em) {
237 | .htmleaf-header h1 {
238 | font-size: 1.5em;
239 | }
240 | }
241 |
242 | @media screen and (max-width: 30em) {
243 | .htmleaf-header h1 {
244 | font-size:1.2em;
245 | }
246 | }
--------------------------------------------------------------------------------
/jQueryScroll/css/default.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icomoon';
3 | src:url('../fonts/icomoon.eot?rretjt');
4 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
5 | url('../fonts/icomoon.woff?rretjt') format('woff'),
6 | url('../fonts/icomoon.ttf?rretjt') format('truetype'),
7 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | [class^="icon-"], [class*=" icon-"] {
13 | font-family: 'icomoon';
14 | speak: none;
15 | font-style: normal;
16 | font-weight: normal;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 |
21 | /* Better Font Rendering =========== */
22 | -webkit-font-smoothing: antialiased;
23 | -moz-osx-font-smoothing: grayscale;
24 | }
25 |
26 | body, html { font-size: 100%; padding: 0; margin: 0;}
27 |
28 | /* Reset */
29 | *,
30 | *:after,
31 | *:before {
32 | -webkit-box-sizing: border-box;
33 | -moz-box-sizing: border-box;
34 | box-sizing: border-box;
35 | }
36 |
37 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
38 | .clearfix:before,
39 | .clearfix:after {
40 | content: " ";
41 | display: table;
42 | }
43 |
44 | .clearfix:after {
45 | clear: both;
46 | }
47 |
48 | body{
49 | background: #f9f7f6;
50 | color: #404d5b;
51 | font-weight: 500;
52 | font-size: 1.05em;
53 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
54 | }
55 | a{color: #2fa0ec;text-decoration: none;outline: none;}
56 | a:hover,a:focus{color:#74777b;}
57 |
58 | .htmleaf-container{
59 | margin: 0 auto;
60 | text-align: center;
61 | overflow: hidden;
62 | }
63 | .htmleaf-content {
64 | font-size: 150%;
65 | padding: 1em 0;
66 | }
67 |
68 | .htmleaf-content h2 {
69 | margin: 0 0 2em;
70 | opacity: 0.1;
71 | }
72 |
73 | .htmleaf-content p {
74 | margin: 1em 0;
75 | padding: 5em 0 0 0;
76 | font-size: 0.65em;
77 | }
78 | .bgcolor-1 { background: #f0efee; }
79 | .bgcolor-2 { background: #f9f9f9; }
80 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/
81 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
82 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
83 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/
84 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/
85 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
86 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
87 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
88 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
89 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
90 | /* Header */
91 | .htmleaf-header{
92 | padding: 1em 190px 1em;
93 | letter-spacing: -1px;
94 | text-align: center;
95 | }
96 | .htmleaf-header h1 {
97 | font-weight: 600;
98 | font-size: 2em;
99 | line-height: 1;
100 | margin-bottom: 0;
101 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
102 | }
103 | .htmleaf-header h1 span {
104 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
105 | display: block;
106 | font-size: 60%;
107 | font-weight: 400;
108 | padding: 0.8em 0 0.5em 0;
109 | color: #c3c8cd;
110 | }
111 | /*nav*/
112 | .htmleaf-demo a{color: #1d7db1;text-decoration: none;}
113 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
114 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;}
115 | .htmleaf-demo a:hover{opacity: 0.6;}
116 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; }
117 | /* Top Navigation Style */
118 | .htmleaf-links {
119 | position: relative;
120 | display: inline-block;
121 | white-space: nowrap;
122 | font-size: 1.5em;
123 | text-align: center;
124 | }
125 |
126 | .htmleaf-links::after {
127 | position: absolute;
128 | top: 0;
129 | left: 50%;
130 | margin-left: -1px;
131 | width: 2px;
132 | height: 100%;
133 | background: #dbdbdb;
134 | content: '';
135 | -webkit-transform: rotate3d(0,0,1,22.5deg);
136 | transform: rotate3d(0,0,1,22.5deg);
137 | }
138 |
139 | .htmleaf-icon {
140 | display: inline-block;
141 | margin: 0.5em;
142 | padding: 0em 0;
143 | width: 1.5em;
144 | text-decoration: none;
145 | }
146 |
147 | .htmleaf-icon span {
148 | display: none;
149 | }
150 |
151 | .htmleaf-icon:before {
152 | margin: 0 5px;
153 | text-transform: none;
154 | font-weight: normal;
155 | font-style: normal;
156 | font-variant: normal;
157 | font-family: 'icomoon';
158 | line-height: 1;
159 | speak: none;
160 | -webkit-font-smoothing: antialiased;
161 | }
162 | /* footer */
163 | .htmleaf-footer{width: 100%;padding-top: 10px;}
164 | .htmleaf-small{font-size: 0.8em;}
165 | .center{text-align: center;}
166 | /****/
167 | .related {
168 | color: #fff;
169 | background: #333;
170 | text-align: center;
171 | font-size: 1.25em;
172 | padding: 0.5em 0;
173 | overflow: hidden;
174 | }
175 |
176 | .related > a {
177 | vertical-align: top;
178 | width: calc(100% - 20px);
179 | max-width: 340px;
180 | display: inline-block;
181 | text-align: center;
182 | margin: 20px 10px;
183 | padding: 25px;
184 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
185 | }
186 | .related a {
187 | display: inline-block;
188 | text-align: left;
189 | margin: 20px auto;
190 | padding: 10px 20px;
191 | opacity: 0.8;
192 | -webkit-transition: opacity 0.3s;
193 | transition: opacity 0.3s;
194 | -webkit-backface-visibility: hidden;
195 | }
196 |
197 | .related a:hover,
198 | .related a:active {
199 | opacity: 1;
200 | }
201 |
202 | .related a img {
203 | max-width: 100%;
204 | opacity: 0.8;
205 | border-radius: 4px;
206 | }
207 | .related a:hover img,
208 | .related a:active img {
209 | opacity: 1;
210 | }
211 | .related h3{font-family: "Microsoft YaHei", sans-serif;}
212 | .related a h3 {
213 | font-weight: 300;
214 | margin-top: 0.15em;
215 | color: #fff;
216 | }
217 | /* icomoon */
218 | .icon-htmleaf-home-outline:before {
219 | content: "\e5000";
220 | }
221 |
222 | .icon-htmleaf-arrow-forward-outline:before {
223 | content: "\e5001";
224 | }
225 |
226 | @media screen and (max-width: 50em) {
227 | .htmleaf-header {
228 | padding: 3em 10% 4em;
229 | }
230 | .htmleaf-header h1 {
231 | font-size:2em;
232 | }
233 | }
234 |
235 |
236 | @media screen and (max-width: 40em) {
237 | .htmleaf-header h1 {
238 | font-size: 1.5em;
239 | }
240 | }
241 |
242 | @media screen and (max-width: 30em) {
243 | .htmleaf-header h1 {
244 | font-size:1.2em;
245 | }
246 | }
--------------------------------------------------------------------------------
/translate/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | CSS3动画特效鼠标hover
131 | 135 |
137 |
183 |
138 |
182 |
139 |
181 |
140 |
152 |
153 |
141 | 
142 |
151 |
142 |
143 |
146 |
150 | CSS动画特效
144 | translate 145 |
154 |
166 |
167 |
155 | 
156 |
165 |
156 |
157 |
160 |
164 | CSS动画特效
158 | translate 159 |
168 |
180 |
169 | 
170 |
179 |
170 |
171 |
174 |
178 | CSS动画特效
172 | translate 173 |
119 |
120 |
126 |
180 |
181 |
182 |
--------------------------------------------------------------------------------
/jQuery手风琴/css/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css 2011-10-24T11:29 UTC - http://github.com/necolas/normalize.css */
2 |
3 | /* =============================================================================
4 | HTML5 display definitions
5 | ========================================================================== */
6 |
7 | /*
8 | * Corrects block display not defined in IE6/7/8/9 & FF3
9 | */
10 |
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | hgroup,
19 | nav,
20 | section {
21 | display: block;
22 | }
23 |
24 | /*
25 | * Corrects inline-block display not defined in IE6/7/8/9 & FF3
26 | */
27 |
28 | audio,
29 | canvas,
30 | video {
31 | display: inline-block;
32 | *display: inline;
33 | *zoom: 1;
34 | }
35 |
36 | /*
37 | * Prevents modern browsers from displaying 'audio' without controls
38 | */
39 |
40 | audio:not([controls]) {
41 | display: none;
42 | }
43 |
44 | /*
45 | * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
46 | * Known issue: no IE6 support
47 | */
48 |
49 | [hidden] {
50 | display: none;
51 | }
52 |
53 |
54 | /* =============================================================================
55 | Base
56 | ========================================================================== */
57 |
58 | /*
59 | * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
60 | * http://clagnut.com/blog/348/#c790
61 | * 2. Keeps page centred in all browsers regardless of content height
62 | * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
63 | * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
64 | */
65 |
66 | html {
67 | font-size: 100%; /* 1 */
68 | /* 2 */
69 | -webkit-text-size-adjust: 100%; /* 3 */
70 | -ms-text-size-adjust: 100%; /* 3 */
71 | }
72 |
73 | /*
74 | * Addresses margins handled incorrectly in IE6/7
75 | */
76 |
77 | body {
78 | margin: 0;
79 | }
80 |
81 | /*
82 | * Addresses font-family inconsistency between 'textarea' and other form elements.
83 | */
84 |
85 | body,
86 | button,
87 | input,
88 | select,
89 | textarea {
90 | font-family: sans-serif;
91 | }
92 |
93 |
94 | /* =============================================================================
95 | Links
96 | ========================================================================== */
97 |
98 | /*
99 | * Addresses outline displayed oddly in Chrome
100 | */
101 |
102 | a:focus {
103 | outline: thin dotted;
104 | }
105 |
106 | /*
107 | * Improves readability when focused and also mouse hovered in all browsers
108 | * people.opera.com/patrickl/experiments/keyboard/test
109 | */
110 |
111 | a:hover,
112 | a:active {
113 | outline: 0;
114 | }
115 |
116 |
117 | /* =============================================================================
118 | Typography
119 | ========================================================================== */
120 |
121 | /*
122 | * Addresses styling not present in IE7/8/9, S5, Chrome
123 | */
124 |
125 | abbr[title] {
126 | border-bottom: 1px dotted;
127 | }
128 |
129 | /*
130 | * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
131 | */
132 |
133 | b,
134 | strong {
135 | font-weight: bold;
136 | }
137 |
138 | blockquote {
139 | margin: 1em 40px;
140 | }
141 |
142 | /*
143 | * Addresses styling not present in S5, Chrome
144 | */
145 |
146 | dfn {
147 | font-style: italic;
148 | }
149 |
150 | /*
151 | * Addresses styling not present in IE6/7/8/9
152 | */
153 |
154 | mark {
155 | background: #ff0;
156 | color: #000;
157 | }
158 |
159 | /*
160 | * Corrects font family set oddly in IE6, S4/5, Chrome
161 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59
162 | */
163 |
164 | pre,
165 | code,
166 | kbd,
167 | samp {
168 | font-family: monospace, serif;
169 | _font-family: 'courier new', monospace;
170 | font-size: 1em;
171 | }
172 |
173 | /*
174 | * Improves readability of pre-formatted text in all browsers
175 | */
176 |
177 | pre {
178 | white-space: pre;
179 | white-space: pre-wrap;
180 | word-wrap: break-word;
181 | }
182 |
183 | /*
184 | * 1. Addresses CSS quotes not supported in IE6/7
185 | * 2. Addresses quote property not supported in S4
186 | */
187 |
188 | /* 1 */
189 |
190 | q {
191 | quotes: none;
192 | }
193 |
194 | /* 2 */
195 |
196 | q:before,
197 | q:after {
198 | content: '';
199 | content: none;
200 | }
201 |
202 | small {
203 | font-size: 75%;
204 | }
205 |
206 | /*
207 | * Prevents sub and sup affecting line-height in all browsers
208 | * gist.github.com/413930
209 | */
210 |
211 | sub,
212 | sup {
213 | font-size: 75%;
214 | line-height: 0;
215 | position: relative;
216 | vertical-align: baseline;
217 | }
218 |
219 | sup {
220 | top: -0.5em;
221 | }
222 |
223 | sub {
224 | bottom: -0.25em;
225 | }
226 |
227 |
228 | /* =============================================================================
229 | Lists
230 | ========================================================================== */
231 |
232 | ul,
233 | ol {
234 | margin: 1em 0;
235 | padding: 0 0 0 40px;
236 | }
237 |
238 | dd {
239 | margin: 0 0 0 40px;
240 | }
241 |
242 | nav ul,
243 | nav ol {
244 | list-style: none;
245 | list-style-image: none;
246 | }
247 |
248 |
249 | /* =============================================================================
250 | Embedded content
251 | ========================================================================== */
252 |
253 | /*
254 | * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
255 | * 2. Improves image quality when scaled in IE7
256 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
257 | */
258 |
259 | img {
260 | border: 0; /* 1 */
261 | -ms-interpolation-mode: bicubic; /* 2 */
262 | }
263 |
264 | /*
265 | * Corrects overflow displayed oddly in IE9
266 | */
267 |
268 | svg:not(:root) {
269 | overflow: hidden;
270 | }
271 |
272 |
273 | /* =============================================================================
274 | Figures
275 | ========================================================================== */
276 |
277 | /*
278 | * Addresses margin not present in IE6/7/8/9, S5, O11
279 | */
280 |
281 | figure {
282 | margin: 0;
283 | }
284 |
285 |
286 | /* =============================================================================
287 | Forms
288 | ========================================================================== */
289 |
290 | /*
291 | * Corrects margin displayed oddly in IE6/7
292 | */
293 |
294 | form {
295 | margin: 0;
296 | }
297 |
298 | /*
299 | * Define consistent border, margin, and padding
300 | */
301 |
302 | fieldset {
303 | border: 1px solid #c0c0c0;
304 | margin: 0 2px;
305 | padding: 0.35em 0.625em 0.75em;
306 | }
307 |
308 | /*
309 | * 1. Corrects color not being inherited in IE6/7/8/9
310 | * 2. Corrects alignment displayed oddly in IE6/7
311 | */
312 |
313 | legend {
314 | border: 0; /* 1 */
315 | *margin-left: -7px; /* 2 */
316 | }
317 |
318 | /*
319 | * 1. Corrects font size not being inherited in all browsers
320 | * 2. Addresses margins set differently in IE6/7, FF3/4, S5, Chrome
321 | * 3. Improves appearance and consistency in all browsers
322 | */
323 |
324 | button,
325 | input,
326 | select,
327 | textarea {
328 | font-size: 100%; /* 1 */
329 | margin: 0; /* 2 */
330 | vertical-align: baseline; /* 3 */
331 | *vertical-align: middle; /* 3 */
332 | }
333 |
334 | /*
335 | * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
336 | */
337 |
338 | button,
339 | input {
340 | line-height: normal; /* 1 */
341 | }
342 |
343 | /*
344 | * 1. Improves usability and consistency of cursor style between image-type 'input' and others
345 | * 2. Corrects inability to style clickable 'input' types in iOS
346 | * 3. Corrects inner spacing displayed oddly in IE7 without effecting normal text inputs
347 | * Known issue: inner spacing remains in IE6
348 | */
349 |
350 | button,
351 | input[type="button"],
352 | input[type="reset"],
353 | input[type="submit"] {
354 | cursor: pointer; /* 1 */
355 | -webkit-appearance: button; /* 2 */
356 | *overflow: visible; /* 3 */
357 | }
358 |
359 | /*
360 | * 1. Addresses box sizing set to content-box in IE8/9
361 | * 2. Addresses excess padding in IE8/9
362 | */
363 |
364 | input[type="checkbox"],
365 | input[type="radio"] {
366 | box-sizing: border-box; /* 1 */
367 | padding: 0; /* 2 */
368 | }
369 |
370 | /*
371 | * 1. Addresses appearance set to searchfield in S5, Chrome
372 | * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
373 | */
374 |
375 | input[type="search"] {
376 | -webkit-appearance: textfield; /* 1 */
377 | -moz-box-sizing: content-box;
378 | -webkit-box-sizing: content-box; /* 2 */
379 | box-sizing: content-box;
380 | }
381 |
382 | /*
383 | * Corrects inner padding displayed oddly in S5, Chrome on OSX
384 | */
385 |
386 | input[type="search"]::-webkit-search-decoration {
387 | -webkit-appearance: none;
388 | }
389 |
390 | /*
391 | * Corrects inner padding and border displayed oddly in FF3/4
392 | * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
393 | */
394 |
395 | button::-moz-focus-inner,
396 | input::-moz-focus-inner {
397 | border: 0;
398 | padding: 0;
399 | }
400 |
401 | /*
402 | * 1. Removes default vertical scrollbar in IE6/7/8/9
403 | * 2. Improves readability and alignment in all browsers
404 | */
405 |
406 | textarea {
407 | overflow: auto; /* 1 */
408 | vertical-align: top; /* 2 */
409 | }
410 |
411 |
412 | /* =============================================================================
413 | Tables
414 | ========================================================================== */
415 |
416 | /*
417 | * Remove most spacing between table cells
418 | */
419 |
420 | table {
421 | border-collapse: collapse;
422 | border-spacing: 0;
423 | }
--------------------------------------------------------------------------------
/threejs/js/Distortions.js:
--------------------------------------------------------------------------------
1 | /**
2 |
3 | Here on top you can find the uniforms for each distortion.
4 |
5 | // ShaderShaping funcitns
6 | https://thebookofshaders.com/05/
7 | Steps
8 | 1. Write getDistortion in GLSL
9 | 2. Write custom uniforms for tweak parameters. Put them outside the object.
10 | 3. Re-create the GLSl funcion in javascript to get camera paning
11 |
12 | Notes:
13 | LookAtAmp AND lookAtOffset are hand tuned to get a good camera panning.
14 | */
15 |
16 | const mountainUniforms = {
17 | // x, y, z
18 | uFreq: new THREE.Uniform(new THREE.Vector3(3, 6, 10)),
19 | uAmp: new THREE.Uniform(new THREE.Vector3(30, 30, 20))
20 | };
21 |
22 | const xyUniforms = {
23 | // x,y
24 | uFreq: new THREE.Uniform(new THREE.Vector2(5, 2)),
25 | uAmp: new THREE.Uniform(new THREE.Vector2(25, 15))
26 | };
27 |
28 | const LongRaceUniforms = {
29 | // x, y
30 | uFreq: new THREE.Uniform(new THREE.Vector2(2, 3)),
31 | uAmp: new THREE.Uniform(new THREE.Vector2(35, 10))
32 | };
33 |
34 | const turbulentUniforms = {
35 | // x,x, y,y
36 | uFreq: new THREE.Uniform(new THREE.Vector4(4, 8, 8, 1)),
37 | uAmp: new THREE.Uniform(new THREE.Vector4(25, 5, 10, 10))
38 | };
39 |
40 | const deepUniforms = {
41 | // x, y
42 | uFreq: new THREE.Uniform(new THREE.Vector2(4, 8)),
43 | uAmp: new THREE.Uniform(new THREE.Vector2(10, 20)),
44 | uPowY: new THREE.Uniform(new THREE.Vector2(20, 2))
45 | };
46 |
47 | let nsin = val => Math.sin(val) * 0.5 + 0.5;
48 |
49 | let mountainDistortion = {
50 | uniforms: mountainUniforms,
51 | getDistortion: `
52 |
53 | uniform vec3 uAmp;
54 | uniform vec3 uFreq;
55 |
56 | #define PI 3.14159265358979
57 |
58 | float nsin(float val){
59 | return sin(val) * 0.5+0.5;
60 | }
61 |
62 | vec3 getDistortion(float progress){
63 |
64 | float movementProgressFix = 0.02;
65 | return vec3(
66 | cos(progress * PI * uFreq.x + uTime) * uAmp.x - cos(movementProgressFix * PI * uFreq.x + uTime) * uAmp.x,
67 | nsin(progress * PI * uFreq.y + uTime) * uAmp.y - nsin(movementProgressFix * PI * uFreq.y + uTime) * uAmp.y,
68 | nsin(progress * PI * uFreq.z + uTime) * uAmp.z - nsin(movementProgressFix * PI * uFreq.z + uTime) * uAmp.z
69 | );
70 | }
71 | `,
72 | getJS: (progress, time) => {
73 | let movementProgressFix = 0.02;
74 |
75 | let uFreq = mountainUniforms.uFreq.value;
76 | let uAmp = mountainUniforms.uAmp.value;
77 |
78 | let distortion = new THREE.Vector3(
79 | Math.cos(progress * Math.PI * uFreq.x + time) * uAmp.x -
80 | Math.cos(movementProgressFix * Math.PI * uFreq.x + time) * uAmp.x,
81 | nsin(progress * Math.PI * uFreq.y + time) * uAmp.y -
82 | nsin(movementProgressFix * Math.PI * uFreq.y + time) * uAmp.y,
83 | nsin(progress * Math.PI * uFreq.z + time) * uAmp.z -
84 | nsin(movementProgressFix * Math.PI * uFreq.z + time) * uAmp.z
85 | );
86 |
87 | let lookAtAmp = new THREE.Vector3(2, 2, 2);
88 | let lookAtOffset = new THREE.Vector3(0, 0, -5);
89 | return distortion.multiply(lookAtAmp).add(lookAtOffset);
90 | }
91 | };
92 |
93 | let xyDistortion = {
94 | uniforms: xyUniforms,
95 | getDistortion: `
96 | uniform vec2 uFreq;
97 | uniform vec2 uAmp;
98 |
99 | #define PI 3.14159265358979
100 |
101 |
102 | vec3 getDistortion(float progress){
103 |
104 | float movementProgressFix = 0.02;
105 | return vec3(
106 | cos(progress * PI * uFreq.x + uTime) * uAmp.x - cos(movementProgressFix * PI * uFreq.x + uTime) *uAmp.x,
107 | sin(progress * PI * uFreq.y + PI/2. + uTime) * uAmp.y - sin(movementProgressFix * PI * uFreq.y + PI/2. + uTime) * uAmp.y,
108 | 0.
109 | );
110 | }
111 | `,
112 | getJS: (progress, time) => {
113 | let movementProgressFix = 0.02;
114 |
115 | let uFreq = xyUniforms.uFreq.value;
116 | let uAmp = xyUniforms.uAmp.value;
117 |
118 | let distortion = new THREE.Vector3(
119 | Math.cos(progress * Math.PI * uFreq.x + time) * uAmp.x -
120 | Math.cos(movementProgressFix * Math.PI * uFreq.x + time) * uAmp.x,
121 | Math.sin(progress * Math.PI * uFreq.y + time + Math.PI / 2) * uAmp.y -
122 | Math.sin(movementProgressFix * Math.PI * uFreq.y + time + Math.PI / 2) *
123 | uAmp.y,
124 | 0
125 | );
126 | let lookAtAmp = new THREE.Vector3(2, 0.4, 1);
127 | let lookAtOffset = new THREE.Vector3(0, 0, -3);
128 | return distortion.multiply(lookAtAmp).add(lookAtOffset);
129 | }
130 | };
131 |
132 | let LongRaceDistortion = {
133 | uniforms: LongRaceUniforms,
134 | getDistortion: `
135 |
136 | uniform vec2 uFreq;
137 | uniform vec2 uAmp;
138 | #define PI 3.14159265358979
139 |
140 | vec3 getDistortion(float progress){
141 |
142 | float camProgress = 0.0125;
143 | return vec3(
144 | sin(progress * PI * uFreq.x +uTime) * uAmp.x - sin(camProgress * PI * uFreq.x+uTime ) * uAmp.x,
145 | sin(progress * PI * uFreq.y +uTime) * uAmp.y - sin(camProgress * PI * uFreq.y+uTime ) * uAmp.y,
146 | 0.
147 | );
148 | }
149 | `,
150 | getJS: (progress, time) => {
151 | let camProgress = 0.0125;
152 |
153 | let uFreq = LongRaceUniforms.uFreq.value;
154 | let uAmp = LongRaceUniforms.uAmp.value;
155 | // Uniforms
156 |
157 | let distortion = new THREE.Vector3(
158 | Math.sin(progress * Math.PI * uFreq.x + time) * uAmp.x -
159 | Math.sin(camProgress * Math.PI * uFreq.x + time) * uAmp.x,
160 | Math.sin(progress * Math.PI * uFreq.y + time) * uAmp.y -
161 | Math.sin(camProgress * Math.PI * uFreq.y + time) * uAmp.y,
162 | 0
163 | );
164 |
165 | let lookAtAmp = new THREE.Vector3(1, 1, 0);
166 | let lookAtOffset = new THREE.Vector3(0, 0, -5);
167 | return distortion.multiply(lookAtAmp).add(lookAtOffset);
168 | }
169 | };
170 |
171 | const turbulentDistortion = {
172 | uniforms: turbulentUniforms,
173 | getDistortion: `
174 | uniform vec4 uFreq;
175 | uniform vec4 uAmp;
176 | float nsin(float val){
177 | return sin(val) * 0.5+0.5;
178 | }
179 |
180 | #define PI 3.14159265358979
181 | float getDistortionX(float progress){
182 | return
183 | (
184 | cos( PI * progress * uFreq.r + uTime) * uAmp.r +
185 | pow(cos(PI * progress * uFreq.g + uTime * (uFreq.g / uFreq.r)),2. )* uAmp.g
186 |
187 | );
188 | }
189 | float getDistortionY(float progress){
190 | return
191 | (
192 | -nsin( PI * progress * uFreq.b + uTime) * uAmp.b +
193 | -pow(nsin(PI * progress * uFreq.a + uTime / (uFreq.b / uFreq.a) ),5.) * uAmp.a
194 |
195 | );
196 | }
197 | vec3 getDistortion(float progress){
198 | return vec3(
199 | getDistortionX(progress)-getDistortionX(0.0125) ,
200 | getDistortionY(progress)- getDistortionY(0.0125),
201 | 0.
202 | );
203 | }
204 | `,
205 | getJS: (progress, time) => {
206 | const uFreq = turbulentUniforms.uFreq.value;
207 | const uAmp = turbulentUniforms.uAmp.value;
208 |
209 | const getX = p =>
210 | Math.cos(Math.PI * p * uFreq.x + time) * uAmp.x +
211 | Math.pow(
212 | Math.cos(Math.PI * p * uFreq.y + time * (uFreq.y / uFreq.x)),
213 | 2
214 | ) *
215 | uAmp.y;
216 | const getY = p =>
217 | -nsin(Math.PI * p * uFreq.z + time) * uAmp.z -
218 | Math.pow(nsin(Math.PI * p * uFreq.w + time / (uFreq.z / uFreq.w)), 5) *
219 | uAmp.w;
220 |
221 | let distortion = new THREE.Vector3(
222 | getX(progress) - getX(progress + 0.007),
223 | getY(progress) - getY(progress + 0.007),
224 | 0
225 | );
226 | let lookAtAmp = new THREE.Vector3(-2, -5, 0);
227 | let lookAtOffset = new THREE.Vector3(0, 0, -10);
228 | return distortion.multiply(lookAtAmp).add(lookAtOffset);
229 | }
230 | };
231 |
232 | const turbulentDistortionStill = {
233 | uniforms: turbulentUniforms,
234 | getDistortion: `
235 | uniform vec4 uFreq;
236 | uniform vec4 uAmp;
237 | float nsin(float val){
238 | return sin(val) * 0.5+0.5;
239 | }
240 |
241 | #define PI 3.14159265358979
242 | float getDistortionX(float progress){
243 | return
244 | (
245 | cos( PI * progress * uFreq.r ) * uAmp.r +
246 | pow(cos(PI * progress * uFreq.g * (uFreq.g / uFreq.r)),2. )* uAmp.g
247 |
248 | );
249 | }
250 | float getDistortionY(float progress){
251 | return
252 | (
253 | -nsin( PI * progress * uFreq.b ) * uAmp.b +
254 | -pow(nsin(PI * progress * uFreq.a / (uFreq.b / uFreq.a) ),5.) * uAmp.a
255 |
256 | );
257 | }
258 | vec3 getDistortion(float progress){
259 | return vec3(
260 | getDistortionX(progress)-getDistortionX(0.02) ,
261 | getDistortionY(progress)- getDistortionY(0.02),
262 | 0.
263 | );
264 | }
265 | `
266 | };
267 |
268 | const deepDistortion = {
269 | uniforms: deepUniforms,
270 | getDistortion: `
271 | uniform vec4 uFreq;
272 | uniform vec4 uAmp;
273 | uniform vec2 uPowY;
274 | float nsin(float val){
275 | return sin(val) * 0.5+0.5;
276 | }
277 |
278 | #define PI 3.14159265358979
279 | float getDistortionX(float progress){
280 | return
281 | (
282 | sin(progress * PI * uFreq.x + uTime) * uAmp.x
283 |
284 | );
285 | }
286 | float getDistortionY(float progress){
287 | return
288 | (
289 | pow(abs(progress * uPowY.x),uPowY.y) + sin(progress * PI * uFreq.y + uTime) * uAmp.y
290 | );
291 | }
292 | vec3 getDistortion(float progress){
293 | return vec3(
294 | getDistortionX(progress)-getDistortionX(0.02) ,
295 | getDistortionY(progress)- getDistortionY(0.02),
296 | 0.
297 | );
298 | }
299 | `,
300 | getJS: (progress, time) => {
301 | const uFreq = deepUniforms.uFreq.value;
302 | const uAmp = deepUniforms.uAmp.value;
303 | const uPowY = deepUniforms.uPowY.value;
304 |
305 | const getX = p => Math.sin(p * Math.PI * uFreq.x + time) * uAmp.x;
306 | const getY = p =>
307 | Math.pow(p * uPowY.x, uPowY.y) +
308 | Math.sin(p * Math.PI * uFreq.y + time) * uAmp.y;
309 |
310 | let distortion = new THREE.Vector3(
311 | getX(progress) - getX(progress + 0.01),
312 | getY(progress) - getY(progress + 0.01),
313 | 0
314 | );
315 | let lookAtAmp = new THREE.Vector3(-2, -4, 0);
316 | let lookAtOffset = new THREE.Vector3(0, 0, -10);
317 | return distortion.multiply(lookAtAmp).add(lookAtOffset);
318 | }
319 | };
320 |
321 | const deepDistortionStill = {
322 | uniforms: deepUniforms,
323 | getDistortion: `
324 | uniform vec4 uFreq;
325 | uniform vec4 uAmp;
326 | uniform vec2 uPowY;
327 | float nsin(float val){
328 | return sin(val) * 0.5+0.5;
329 | }
330 |
331 | #define PI 3.14159265358979
332 | float getDistortionX(float progress){
333 | return
334 | (
335 | sin(progress * PI * uFreq.x ) * uAmp.x * 2.
336 |
337 | );
338 | }
339 | float getDistortionY(float progress){
340 | return
341 | (
342 | pow(abs(progress * uPowY.x),uPowY.y) + sin(progress * PI * uFreq.y ) * uAmp.y
343 | );
344 | }
345 | vec3 getDistortion(float progress){
346 | return vec3(
347 | getDistortionX(progress)-getDistortionX(0.02) ,
348 | getDistortionY(progress)- getDistortionY(0.05),
349 | 0.
350 | );
351 | }
352 | `
353 | };
354 | /**
355 |
356 | let tempUniforms ={};
357 | LongRacetempDistortion = {
358 | uniforms: tempUniforms,
359 | getDistortion: `
360 |
361 | #define PI 3.14159265358979
362 |
363 | vec3 getDistortion(float progress){
364 |
365 | float movementProgressFix = 0.02;
366 | return vec3(
367 | sin(progress * PI * 4.),
368 | 0.,
369 | 0.
370 | );
371 | }
372 | ` ,
373 | getJS: (progress,time)=>{
374 | let movementProgressFix = 0.02;
375 |
376 | // Uniforms
377 |
378 | let distortion = new THREE.Vector3(
379 | Math.sin(progress * Math.PI * 4.),
380 | 0.,
381 | 0.
382 | );
383 |
384 | let lookAtAmp = new THREE.Vector3(0.,0.,0.);
385 | let lookAtOffset = new THREE.Vector3(0.,0.,0.);
386 | return distortion.multiply(lookAtAmp).add(lookAtOffset);
387 | }
388 |
389 | }
390 |
391 |
392 | */
393 |
--------------------------------------------------------------------------------
/h5game/js/modernizr.js:
--------------------------------------------------------------------------------
1 | window.Modernizr=function(e,t,n){function r(e){b.cssText=e}function o(e,t){return r(S.join(e+";")+(t||""))}function a(e,t){return typeof e===t}function i(e,t){return!!~(""+e).indexOf(t)}function c(e,t){for(var r in e){var o=e[r];if(!i(o,"-")&&b[o]!==n)return"pfx"==t?o:!0}return!1}function s(e,t,r){for(var o in e){var i=t[e[o]];if(i!==n)return r===!1?e[o]:a(i,"function")?i.bind(r||t):i}return!1}function l(e,t,n){var r=e.charAt(0).toUpperCase()+e.slice(1),o=(e+" "+k.join(r+" ")+r).split(" ");return a(t,"string")||a(t,"undefined")?c(o,t):(o=(e+" "+T.join(r+" ")+r).split(" "),s(o,t,n))}function u(){m.input=function(n){for(var r=0,o=n.length;o>r;r++)M[n[r]]=n[r]in E;return M.list&&(M.list=!!t.createElement("datalist")&&!!e.HTMLDataListElement),M}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),m.inputtypes=function(e){for(var r,o,a,i=0,c=e.length;c>i;i++)E.setAttribute("type",o=e[i]),r="text"!==E.type,r&&(E.value=w,E.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(o)&&E.style.WebkitAppearance!==n?(g.appendChild(E),a=t.defaultView,r=a.getComputedStyle&&"textfield"!==a.getComputedStyle(E,null).WebkitAppearance&&0!==E.offsetHeight,g.removeChild(E)):/^(search|tel)$/.test(o)||(r=/^(url|email)$/.test(o)?E.checkValidity&&E.checkValidity()===!1:E.value!=w)),P[e[i]]=!!r;return P}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var f,d,p="2.8.3",m={},h=!0,g=t.documentElement,v="modernizr",y=t.createElement(v),b=y.style,E=t.createElement("input"),w=":)",x={}.toString,S=" -webkit- -moz- -o- -ms- ".split(" "),C="Webkit Moz O ms",k=C.split(" "),T=C.toLowerCase().split(" "),j={svg:"http://www.w3.org/2000/svg"},N={},P={},M={},A=[],L=A.slice,$=function(e,n,r,o){var a,i,c,s,l=t.createElement("div"),u=t.body,f=u||t.createElement("body");if(parseInt(r,10))for(;r--;)c=t.createElement("div"),c.id=o?o[r]:v+(r+1),l.appendChild(c);return a=["",'"].join(""),l.id=v,(u?l:f).innerHTML+=a,f.appendChild(l),u||(f.style.background="",f.style.overflow="hidden",s=g.style.overflow,g.style.overflow="hidden",g.appendChild(f)),i=n(l,e),u?l.parentNode.removeChild(l):(f.parentNode.removeChild(f),g.style.overflow=s),!!i},z=function(){function e(e,o){o=o||t.createElement(r[e]||"div"),e="on"+e;var i=e in o;return i||(o.setAttribute||(o=t.createElement("div")),o.setAttribute&&o.removeAttribute&&(o.setAttribute(e,""),i=a(o[e],"function"),a(o[e],"undefined")||(o[e]=n),o.removeAttribute(e))),o=null,i}var r={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return e}(),D={}.hasOwnProperty;d=a(D,"undefined")||a(D.call,"undefined")?function(e,t){return t in e&&a(e.constructor.prototype[t],"undefined")}:function(e,t){return D.call(e,t)},Function.prototype.bind||(Function.prototype.bind=function(e){var t=this;if("function"!=typeof t)throw new TypeError;var n=L.call(arguments,1),r=function(){if(this instanceof r){var o=function(){};o.prototype=t.prototype;var a=new o,i=t.apply(a,n.concat(L.call(arguments)));return Object(i)===i?i:a}return t.apply(e,n.concat(L.call(arguments)))};return r}),N.flexbox=function(){return l("flexWrap")},N.canvas=function(){var e=t.createElement("canvas");return!!e.getContext&&!!e.getContext("2d")},N.canvastext=function(){return!!m.canvas&&!!a(t.createElement("canvas").getContext("2d").fillText,"function")},N.webgl=function(){return!!e.WebGLRenderingContext},N.touch=function(){var n;return"ontouchstart"in e||e.DocumentTouch&&t instanceof DocumentTouch?n=!0:$(["@media (",S.join("touch-enabled),("),v,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(e){n=9===e.offsetTop}),n},N.geolocation=function(){return"geolocation"in navigator},N.postmessage=function(){return!!e.postMessage},N.websqldatabase=function(){return!!e.openDatabase},N.indexedDB=function(){return!!l("indexedDB",e)},N.hashchange=function(){return z("hashchange",e)&&(t.documentMode===n||t.documentMode>7)},N.history=function(){return!!e.history&&!!history.pushState},N.draganddrop=function(){var e=t.createElement("div");return"draggable"in e||"ondragstart"in e&&"ondrop"in e},N.websockets=function(){return"WebSocket"in e||"MozWebSocket"in e},N.rgba=function(){return r("background-color:rgba(150,255,150,.5)"),i(b.backgroundColor,"rgba")},N.hsla=function(){return r("background-color:hsla(120,40%,100%,.5)"),i(b.backgroundColor,"rgba")||i(b.backgroundColor,"hsla")},N.multiplebgs=function(){return r("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(b.background)},N.backgroundsize=function(){return l("backgroundSize")},N.borderimage=function(){return l("borderImage")},N.borderradius=function(){return l("borderRadius")},N.boxshadow=function(){return l("boxShadow")},N.textshadow=function(){return""===t.createElement("div").style.textShadow},N.opacity=function(){return o("opacity:.55"),/^0.55$/.test(b.opacity)},N.cssanimations=function(){return l("animationName")},N.csscolumns=function(){return l("columnCount")},N.cssgradients=function(){var e="background-image:",t="gradient(linear,left top,right bottom,from(#9f9),to(white));",n="linear-gradient(left top,#9f9, white);";return r((e+"-webkit- ".split(" ").join(t+e)+S.join(n+e)).slice(0,-e.length)),i(b.backgroundImage,"gradient")},N.cssreflections=function(){return l("boxReflect")},N.csstransforms=function(){return!!l("transform")},N.csstransforms3d=function(){var e=!!l("perspective");return e&&"webkitPerspective"in g.style&&$("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(t){e=9===t.offsetLeft&&3===t.offsetHeight}),e},N.csstransitions=function(){return l("transition")},N.fontface=function(){var e;return $('@font-face {font-family:"font";src:url("https://")}',function(n,r){var o=t.getElementById("smodernizr"),a=o.sheet||o.styleSheet,i=a?a.cssRules&&a.cssRules[0]?a.cssRules[0].cssText:a.cssText||"":"";e=/src/i.test(i)&&0===i.indexOf(r.split(" ")[0])}),e},N.generatedcontent=function(){var e;return $(["#",v,"{font:0/0 a}#",v,':after{content:"',w,'";visibility:hidden;font:3px/1 a}'].join(""),function(t){e=t.offsetHeight>=3}),e},N.video=function(){var e=t.createElement("video"),n=!1;try{(n=!!e.canPlayType)&&(n=new Boolean(n),n.ogg=e.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),n.h264=e.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),n.webm=e.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,""))}catch(r){}return n},N.audio=function(){var e=t.createElement("audio"),n=!1;try{(n=!!e.canPlayType)&&(n=new Boolean(n),n.ogg=e.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),n.mp3=e.canPlayType("audio/mpeg;").replace(/^no$/,""),n.wav=e.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),n.m4a=(e.canPlayType("audio/x-m4a;")||e.canPlayType("audio/aac;")).replace(/^no$/,""))}catch(r){}return n},N.localstorage=function(){try{return localStorage.setItem(v,v),localStorage.removeItem(v),!0}catch(e){return!1}},N.sessionstorage=function(){try{return sessionStorage.setItem(v,v),sessionStorage.removeItem(v),!0}catch(e){return!1}},N.webworkers=function(){return!!e.Worker},N.applicationcache=function(){return!!e.applicationCache},N.svg=function(){return!!t.createElementNS&&!!t.createElementNS(j.svg,"svg").createSVGRect},N.inlinesvg=function(){var e=t.createElement("div");return e.innerHTML="",(e.firstChild&&e.firstChild.namespaceURI)==j.svg},N.smil=function(){return!!t.createElementNS&&/SVGAnimate/.test(x.call(t.createElementNS(j.svg,"animate")))},N.svgclippaths=function(){return!!t.createElementNS&&/SVGClipPath/.test(x.call(t.createElementNS(j.svg,"clipPath")))};for(var F in N)d(N,F)&&(f=F.toLowerCase(),m[f]=N[F](),A.push((m[f]?"":"no-")+f));return m.input||u(),m.addTest=function(e,t){if("object"==typeof e)for(var r in e)d(e,r)&&m.addTest(r,e[r]);else{if(e=e.toLowerCase(),m[e]!==n)return m;t="function"==typeof t?t():t,"undefined"!=typeof h&&h&&(g.className+=" "+(t?"":"no-")+e),m[e]=t}return m},r(""),y=E=null,function(e,t){function n(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x",r.insertBefore(n.lastChild,r.firstChild)}function r(){var e=y.elements;return"string"==typeof e?e.split(" "):e}function o(e){var t=v[e[h]];return t||(t={},g++,e[h]=g,v[g]=t),t}function a(e,n,r){if(n||(n=t),u)return n.createElement(e);r||(r=o(n));var a;return a=r.cache[e]?r.cache[e].cloneNode():m.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function i(e,n){if(e||(e=t),u)return e.createDocumentFragment();n=n||o(e);for(var a=n.frag.cloneNode(),i=0,c=r(),s=c.length;s>i;i++)a.createElement(c[i]);return a}function c(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return y.shivMethods?a(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+r().join().replace(/[\w\-]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(y,t.frag)}function s(e){e||(e=t);var r=o(e);return y.shivCSS&&!l&&!r.hasCSS&&(r.hasCSS=!!n(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),u||c(e,r),e}var l,u,f="3.7.0",d=e.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,m=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,h="_html5shiv",g=0,v={};!function(){try{var e=t.createElement("a");e.innerHTML="CSS3动画特效鼠标hover
121 | 125 |
127 |
179 |
128 |
178 |
129 |
177 |
130 |
144 |
145 |
131 |
132 |
143 |
132 |
133 |
142 | CSS动画特效
134 | translate 135 | 141 |
146 |
160 |
161 |
147 |
148 |
159 |
148 |
149 |
158 | CSS动画特效
150 | translate 151 | 157 |
162 |
176 |
163 |
164 |
175 |
164 |
165 |
174 |