├── LICENSE.md ├── README.md ├── animated-gameboy-in-css.css ├── animated-gameboy-in-css.html ├── animated-gameboy-in-css.less └── animated-gameboy.gif /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Brian Chan (http://www.bchanx.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | animated-gameboy-in-css 2 | ======================= 3 | ![Animated Gameboy in CSS](https://raw.githubusercontent.com/bchanx/animated-gameboy-in-css/master/animated-gameboy.gif) 4 | 5 | Animated Gameboy created in CSS, built in [less](http://www.lesscss.org). 6 | 7 | **See it in action here:** [bchanx.com/animated-gameboy-in-css](http://www.bchanx.com/animated-gameboy-in-css) 8 | 9 | *Credit to [@brentclouse](https://twitter.com/brentclouse) for the [original](https://dribbble.com/shots/1376791-Game-Boy-Color-GIF) inspiration.* 10 | 11 | Development 12 | =========== 13 | To view this locally, checkout this repository, then simply open the `.html` file in any browser. 14 | 15 | To make CSS changes, follow the installation instructions from the [less website](http://lesscss.org/#using-less-installation). 16 | Afterwards, compile `.less` to `.css` by running the following: 17 | ```bash 18 | $ lessc animated-gameboy-in-css.less animated-gameboy-in-css.css 19 | ``` 20 | 21 | License 22 | ======= 23 | This software is free to use under the MIT license. 24 | -------------------------------------------------------------------------------- /animated-gameboy-in-css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
GAME BOY
67 |
C
68 |
69 |
GAME BOY
70 |
Nintendo
71 |
72 |
.
73 |
74 |
B
75 |
A
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | 85 |
86 | Colors: 87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 | -------------------------------------------------------------------------------- /animated-gameboy-in-css.less: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright (c) 2015 Brian Chan (bchanx.com) 3 | // All Rights Reserved. 4 | // 5 | 6 | @import url(https://fonts.googleapis.com/css?family=Asap:400italic,700italic); 7 | @import url(https://fonts.googleapis.com/css?family=Oxygen:700,300); 8 | 9 | ///// COLORS 10 | 11 | @white: #ffffff; 12 | @whitegray: #f0f0f0; 13 | @lightergray: #b0b0b0; 14 | @lightgray: #9d9d9d; 15 | @gray: #808080; 16 | @darkgray: #303030; 17 | @black: #222222; 18 | @lightgreen: #5cd17d; 19 | @green: #4ca879; 20 | @darkgreen: #308d58; 21 | 22 | @gameboy-red: #ff0151; 23 | @gameboy-purple: #5151dd; 24 | @gameboy-green: #85e367; 25 | @gameboy-yellow: #f9e52e; 26 | @gameboy-teal: #01b4dd; 27 | @gameboy-transparent: rgba(140, 46, 217, 0.125); 28 | 29 | @gameboy-colors: red, purple, green, yellow, teal, transparent; 30 | @gameboy-gloss-tints: 10%, 5%, 15%, 20%, 10%, 35%; 31 | 32 | ///// RESET 33 | 34 | * { 35 | box-sizing: border-box; 36 | } 37 | 38 | html { 39 | background-color: @whitegray; 40 | color: @black; 41 | } 42 | 43 | body { 44 | margin: 0; 45 | } 46 | 47 | ///// GAMEBOY 48 | 49 | @gameboy-width: 340px; 50 | @gameboy-height: 570px; 51 | @gameboy-duration: 8s infinite; 52 | @gameboy-border-radius: ~"15px 15px 170px 170px / 15px 15px 35px 35px"; 53 | 54 | #gameboy { 55 | position: relative; 56 | width: @gameboy-width; 57 | height: @gameboy-height; 58 | overflow: hidden; 59 | margin: 40px auto; 60 | line-height: 1; 61 | border-radius: @gameboy-border-radius; 62 | .transform(translateZ(0)); 63 | .border-radius-fix(); 64 | &:hover { 65 | div { 66 | opacity: 0.7; 67 | } 68 | div[class="circuit"] { 69 | &::before, 70 | &::after { 71 | opacity: 0.5; 72 | } 73 | } 74 | div[id^="screen-"][id$="-text"] { 75 | opacity: 0; 76 | } 77 | div:not([id="speaker-holes"]):not([id^="cover-"]):not([id="power"]):not([class="capacitors"]):not([id$="-text"]):not([id="canvas"]):not([class="circuit"]):not([id="transistors"]):not([id="joystick-pad"]):not([id="control"]):not([id="start-select-button"]) { 78 | box-shadow: 0 0 0 2px @black; 79 | } 80 | #cover-vertical, 81 | #cover-horizontal { 82 | opacity: 0.1; 83 | } 84 | #gloss { 85 | opacity: 0.2; 86 | } 87 | } 88 | &.transparent { 89 | &:hover { 90 | #cover-vertical, 91 | #cover-horizontal { 92 | opacity: 0.4; 93 | } 94 | #gloss { 95 | opacity: 0.6; 96 | } 97 | } 98 | } 99 | } 100 | 101 | ///// 102 | 103 | @canvas-width: @gameboy-width; 104 | @canvas-height: @gameboy-height; 105 | @canvas-top: 0; 106 | @canvas-right: 0; 107 | @canvas-color: @lightergray; 108 | @canvas-z: 1; 109 | .keyframes(canvas, { 110 | 0% { width: 0; height: 120px; border-radius: 15px 15px 0 0; } 111 | 3% { width: @canvas-width; height: 120px; } 112 | 5.5% { height: @canvas-height - 50px; } 113 | 6.0% { border-radius: 15px 15px 0 0; } 114 | 7.0% { height: @canvas-height; border-radius: @gameboy-border-radius; } 115 | }); 116 | 117 | #canvas { 118 | position: absolute; 119 | width: @canvas-width; 120 | height: @canvas-height; 121 | top: @canvas-top; 122 | right: @canvas-right; 123 | border-radius: @gameboy-border-radius; 124 | background-color: @canvas-color; 125 | .animation(canvas @gameboy-duration linear); 126 | z-index: @canvas-z; 127 | } 128 | 129 | ///// 130 | 131 | @border-width: 318px; 132 | @border-height: 526px; 133 | @border-thickness: 4px; 134 | @border-color: @gray; 135 | @border-top: @canvas-top + 20px; 136 | @border-right: (@gameboy-width - @border-width) / 2; 137 | @border-z: @canvas-z + 1; 138 | .keyframes(border, { 139 | 0% { border-width: 0; border-color: transparent; width: 0; height: 0; } 140 | 1% { border-width: 4px; border-top-color: @border-color; width: 0; height: 10px; } 141 | 3% { width: @border-width; border-left-color: transparent; height: 10px; } 142 | 3.3% { width: @border-width; border-left-color: @border-color; height: 10px; } 143 | 7.0% { border-radius: 15px 15px 0 0; } 144 | 7.3% { height: @border-height; border-radius: @gameboy-border-radius; } 145 | 7.4% { border-bottom-color: transparent; } 146 | 7.5% { border-bottom-color: @border-color; } 147 | 8.9% { border-right-color: transparent; } 148 | 9% { border-right-color: @border-color; } 149 | }); 150 | 151 | #border { 152 | position: absolute; 153 | width: @border-width; 154 | height: @border-height; 155 | right: @border-right; 156 | top: @border-top; 157 | border: @border-thickness @border-color solid; 158 | border-radius: @gameboy-border-radius; 159 | z-index: @border-z; 160 | .animation(border @gameboy-duration linear); 161 | } 162 | 163 | ///// 164 | 165 | @border-hide-z: @border-z + 1; 166 | #border-top, 167 | #border-bottom { 168 | position: absolute; 169 | background-color: @canvas-color; 170 | width: 0; 171 | height: @border-thickness * 2; 172 | z-index: @border-hide-z; 173 | } 174 | 175 | #border-left, 176 | #border-right { 177 | position: absolute; 178 | background-color: @canvas-color; 179 | height: 0; 180 | z-index: @border-hide-z; 181 | } 182 | 183 | .keyframes(border-top, { 184 | 0.5% { width: 0; } 185 | 3.0% { width: @border-width; right: @border-right; } 186 | 3.5% { width: @border-width; right: @border-right; } 187 | 5% { width: 0; right: @border-width + @border-right - @border-thickness * 5 ; } 188 | }); 189 | #border-top { 190 | top: @border-top; 191 | right: @border-right; 192 | .animation(border-top @gameboy-duration linear); 193 | } 194 | 195 | .keyframes(border-left, { 196 | 0% { height: 0; } 197 | 3% { height: 0; } 198 | 5% { height: @border-height - 200px; top: @border-top; } 199 | 7.5% { height: 0; top: @border-height + @border-top; } 200 | }); 201 | #border-left { 202 | left: @border-right; 203 | top: @border-top; 204 | width: @border-thickness * 5; 205 | .animation(border-left @gameboy-duration linear); 206 | } 207 | 208 | .keyframes(border-bottom, { 209 | 0% { width: 0; } 210 | 6.5% { width: 0; } 211 | 7.4% { width: @border-width; left: @border-right; } 212 | 9.0% { width: 0; left: @border-width + @border-right; } 213 | }); 214 | #border-bottom { 215 | top: @border-top + @border-height - 30px; 216 | left: @border-right; 217 | height: 30px; 218 | .animation(border-bottom @gameboy-duration linear); 219 | } 220 | 221 | .keyframes(border-right, { 222 | 0% { height: 0; } 223 | 8% { height: 0; } 224 | 8.5% { height: @border-height - 30px; top: @border-top + 6px; } 225 | 9% { height: @border-height - 30px; } 226 | 11.5% { height: 0; top: @border-top + 6px; } 227 | 100% { top: @border-top + @border-height; } 228 | }); 229 | #border-right { 230 | right: @border-right; 231 | top: @border-top + 6px; 232 | width: @border-thickness * 2; 233 | .animation(border-right @gameboy-duration linear); 234 | } 235 | 236 | ///// 237 | 238 | @screw-small-radius: 9px; 239 | @screw-small-width: @screw-small-radius * 2; 240 | @screw-small-edge: 25px; 241 | @screw-small-top: @border-top + 14px; 242 | @screw-large-radius: 10px; 243 | @screw-large-width: @screw-large-radius * 2; 244 | @screw-large-edge: 3px; 245 | @screw-large-top: @border-top + 215px; 246 | @screw-z: @border-hide-z + 1; 247 | 248 | .screw { 249 | border-radius: 100%; 250 | background-color: @black; 251 | z-index: @screw-z; 252 | position: absolute; 253 | &.small { 254 | width: @screw-small-width; 255 | height: @screw-small-width; 256 | top: @screw-small-top; 257 | } 258 | &.large { 259 | width: @screw-large-width; 260 | height: @screw-large-width; 261 | top: @screw-large-top; 262 | } 263 | } 264 | 265 | .keyframes(screw-small-right, { 266 | 0% { width: 0; height: 0; right: @screw-small-edge + @screw-small-radius; top: @screw-small-top + @screw-small-radius; } 267 | 2.5% { width: 0; height: 0; right: @screw-small-edge + @screw-small-radius; top: @screw-small-top + @screw-small-radius; } 268 | 5.5% { width: @screw-small-width ; height: @screw-small-width; right: @screw-small-edge; top: @screw-small-top; } 269 | }); 270 | #screw-small-right { 271 | right: @screw-small-edge; 272 | .animation(screw-small-right @gameboy-duration linear); 273 | } 274 | 275 | .keyframes(screw-small-left, { 276 | 0% { width: 0; height: 0; left: @screw-small-edge + @screw-small-radius; top: @screw-small-top + @screw-small-radius; } 277 | 3% { width: 0; height: 0; left: @screw-small-edge + @screw-small-radius; top: @screw-small-top + @screw-small-radius; } 278 | 6% { width: @screw-small-width ; height: @screw-small-width; left: @screw-small-edge; top: @screw-small-top; } 279 | }); 280 | #screw-small-left { 281 | left: @screw-small-edge; 282 | .animation(screw-small-left @gameboy-duration linear); 283 | } 284 | 285 | .keyframes(screw-large-right, { 286 | 0% { width: 0; height: 0; right: @screw-large-edge + @screw-large-radius; top: @screw-large-top + @screw-large-radius; } 287 | 5.5% { width: 0; height: 0; right: @screw-large-edge + @screw-large-radius; top: @screw-large-top + @screw-large-radius; } 288 | 8.5% { width: @screw-large-width; height: @screw-large-width; right: @screw-large-edge; top: @screw-large-top; } 289 | }); 290 | #screw-large-right { 291 | right: @screw-large-edge; 292 | .animation(screw-large-right @gameboy-duration linear); 293 | } 294 | 295 | .keyframes(screw-large-left, { 296 | 0% { width: 0; height: 0; left: @screw-large-edge + @screw-large-radius; top: @screw-large-top + @screw-large-radius; } 297 | 6.5% { width: 0; height: 0; left: @screw-large-edge + @screw-large-radius; top: @screw-large-top + @screw-large-radius; } 298 | 9.5% { width: @screw-large-width; height: @screw-large-width; left: @screw-large-edge; top: @screw-large-top; } 299 | }); 300 | #screw-large-left { 301 | left: @screw-large-edge; 302 | .animation(screw-large-left @gameboy-duration linear); 303 | } 304 | 305 | ///// 306 | 307 | @backboard-width: 220px; 308 | @backboard-mid-height: 36px; 309 | @backboard-height: 75px; 310 | @backboard-left: (@gameboy-width - @backboard-width) / 2; 311 | @backboard-bottom: 340px; 312 | @backboard-z: @canvas-z + 1; 313 | .keyframes(backboard, { 314 | 0% { width: 0; height: 0; left: @gameboy-width/2; bottom: @backboard-bottom; } 315 | 4.5% { width: 0; height: 0; left: @gameboy-width/2; } 316 | 6.5% { width: @backboard-mid-height; height: @backboard-mid-height; left: (@gameboy-width - @backboard-mid-height)/2; } 317 | 10% { width: @backboard-width; left: @backboard-left; } 318 | 10.5% { height: @backboard-mid-height; } 319 | 14% { height: @backboard-height; } 320 | }); 321 | 322 | #backboard { 323 | z-index: @backboard-z; 324 | width: @backboard-width; 325 | height: @backboard-height; 326 | position: absolute; 327 | left: @backboard-left; 328 | bottom: @backboard-bottom; 329 | background-color: @black; 330 | .animation(backboard @gameboy-duration linear); 331 | } 332 | 333 | ///// 334 | 335 | @motherboard-width: 270px; 336 | @motherboard-height: 400px; 337 | @motherboard-left: (@gameboy-width - @motherboard-width) / 2; 338 | @motherboard-top: @border-top + 55px; 339 | @motherboard-square: 56px; 340 | @motherboard-square-top: 265px; 341 | @motherboard-z: @backboard-z + 1; 342 | @motherboard-color: @green; 343 | @motherboard-detail-color: mix(@green, @gray, 50%); 344 | @cover-z: @motherboard-z + 10; 345 | .keyframes(motherboard, { 346 | 0% { width: 0; height: 0; left: @gameboy-width/2; top: @motherboard-square-top + @motherboard-square/2; } 347 | 6% { width: 0; height: 0; left: @gameboy-width/2; top: @motherboard-square-top + @motherboard-square/2; } 348 | 8% { width: @motherboard-square; height: @motherboard-square; left: (@gameboy-width - @motherboard-square)/2; top: @motherboard-square-top; } 349 | 8.5% { height: @motherboard-square; top: @motherboard-square-top; } 350 | 10.5% { width: @motherboard-square; height: @motherboard-height; top: @motherboard-top; } 351 | 11% { width: @motherboard-square; left: (@gameboy-width - @motherboard-square)/2; } 352 | 16% { width: @motherboard-width; left: (@gameboy-width - @motherboard-width)/2; } 353 | }); 354 | 355 | @motherboard-before-left: 87px; 356 | .keyframes(motherboard-before, { 357 | 0% { height: 0; box-shadow: -6px @motherboard-height @motherboard-detail-color, 9px @motherboard-height @motherboard-detail-color; } 358 | 18% { height: 0; } 359 | 20% { height: 100%; box-shadow: -6px @motherboard-height @motherboard-detail-color, 9px @motherboard-height @motherboard-detail-color; } 360 | 22% { box-shadow: -6px 0 @motherboard-detail-color, 9px @motherboard-height @motherboard-detail-color; } 361 | 24% { box-shadow: -6px 0 @motherboard-detail-color, 9px 0 @motherboard-detail-color; } 362 | }); 363 | 364 | #motherboard { 365 | z-index: @motherboard-z; 366 | position: absolute; 367 | width: @motherboard-width; 368 | height: @motherboard-height; 369 | left: @motherboard-left; 370 | top: @motherboard-top; 371 | overflow: hidden; 372 | background-color: @motherboard-color; 373 | .animation(motherboard @gameboy-duration linear); 374 | &::before { 375 | content: ""; 376 | position: absolute; 377 | left: @motherboard-before-left; 378 | width: 2px; 379 | height: 100%; 380 | background-color: @motherboard-detail-color; 381 | box-shadow: -6px 0 @motherboard-detail-color, 9px 0 @motherboard-detail-color; 382 | .animation(motherboard-before @gameboy-duration linear); 383 | } 384 | } 385 | 386 | ///// 387 | 388 | @chip-z: @motherboard-z + 1; 389 | @chip-color: @darkgreen; 390 | @chip-detail-color: shade(@chip-color, 20%); 391 | .chip { 392 | z-index: @chip-z; 393 | background-color: @chip-color; 394 | position: absolute; 395 | } 396 | 397 | ///// 398 | 399 | @chip-tall-width: 30px; 400 | @chip-tall-right: 35px; 401 | .keyframes(chip-tall, { 402 | 0% { width: 0; height: @motherboard-height; right: 35px;} 403 | 6.5% { width: 0; } 404 | 8.5% { width: @chip-tall-width; } 405 | }); 406 | .keyframes(chip-tall-before, { 407 | 0% { height: 0; } 408 | 10% { height: 0; } 409 | 11.5% { height: 100%; } 410 | }); 411 | .keyframes(chip-tall-after, { 412 | 0% { height: 0; } 413 | 11.5% { height: 0; } 414 | 13% { height: 100%; } 415 | }); 416 | 417 | #chip-tall { 418 | width: @chip-tall-width; 419 | height: @motherboard-height; 420 | top: @motherboard-top; 421 | right: @chip-tall-right; 422 | .animation(chip-tall @gameboy-duration linear); 423 | &::before { 424 | content: ""; 425 | position: absolute; 426 | right: 8px; 427 | bottom: 0; 428 | width: 4px; 429 | height: 100%; 430 | background-color: @chip-detail-color; 431 | .animation(chip-tall-before @gameboy-duration linear); 432 | } 433 | &::after { 434 | content: ""; 435 | position: absolute; 436 | right: 18px; 437 | bottom: 0; 438 | width: 4px; 439 | height: 100%; 440 | background-color: @chip-detail-color; 441 | .animation(chip-tall-after @gameboy-duration linear); 442 | } 443 | } 444 | 445 | ///// 446 | 447 | @chip-short-width: 80px; 448 | @chip-short-height: 200px; 449 | @chip-short-height-final: 140px; 450 | .keyframes(chip-short, { 451 | 0% { width: 0; height: @chip-short-height; right: 35px; } 452 | 6.5% { width: 0; } 453 | 8.5% { width: @chip-tall-width; height: @chip-short-height; } 454 | 10.5% { width: @chip-short-width; height: @chip-short-height-final; } 455 | }); 456 | .chip-details(@name, @x, @y) { 457 | .keyframes(@name, { 458 | 0% { background-color: transparent; box-shadow: @x @y transparent; } 459 | 18% { background-color: transparent; } 460 | 20% { box-shadow: @x @y transparent; } 461 | 24% { background-color: @motherboard-detail-color; } 462 | 26% { box-shadow: @x @y @motherboard-detail-color; } 463 | }); 464 | } 465 | .chip-details(chip-details, 6px, 0); 466 | .chip-details(chip-details-diagonal, 5px, 4px); 467 | 468 | #chip-short { 469 | width: @chip-short-width; 470 | height: @chip-short-height-final; 471 | top: @motherboard-top; 472 | right: @chip-tall-right; 473 | .animation(chip-short @gameboy-duration linear); 474 | &::before { 475 | content: ""; 476 | width: 2px; 477 | height: 201px; 478 | top: 199px; 479 | background-color: @motherboard-detail-color; 480 | position: absolute; 481 | left: -14px + (@chip-short-width - @chip-tall-width); 482 | box-shadow: 6px 0 @motherboard-detail-color; 483 | .animation(chip-details @gameboy-duration linear); 484 | } 485 | &::after { 486 | content: ""; 487 | width: 2px; 488 | height: 100%; 489 | background-color: @motherboard-detail-color; 490 | position: absolute; 491 | left: -14px; 492 | box-shadow: 6px 0 @motherboard-detail-color; 493 | .animation(chip-details @gameboy-duration linear); 494 | } 495 | } 496 | 497 | ///// 498 | 499 | @chip-diagonal-width: 50px; 500 | @chip-diagonal-height: 78px; 501 | @chip-diagonal-bottom: 295px; 502 | @chip-diagonal-left: 275px; 503 | .keyframes(chip-diagonal, { 504 | 0% { width: 0; height: 0; } 505 | 8.5% { width: 0; height: 0; } 506 | 10.5% { width: @chip-diagonal-width; height: @chip-diagonal-height; } 507 | }); 508 | 509 | #chip-diagonal { 510 | width: @chip-diagonal-width; 511 | height: @chip-diagonal-height; 512 | left: @chip-diagonal-left; 513 | bottom: @chip-diagonal-bottom; 514 | border-bottom-right-radius: 100% 100%; 515 | .transform-origin(0 100%); 516 | .transform(rotateZ(-40deg)); 517 | .animation(chip-diagonal @gameboy-duration linear); 518 | &::before { 519 | content: ""; 520 | width: 2px; 521 | height: 100%; 522 | background-color: @motherboard-detail-color; 523 | position: absolute; 524 | left: -11px; 525 | top: -9px; 526 | box-shadow: 5px 4px @motherboard-detail-color; 527 | .animation(chip-details-diagonal @gameboy-duration linear); 528 | } 529 | } 530 | 531 | ///// 532 | 533 | @capacitors-z: @chip-z + 1; 534 | @capacitors-box-shadow: 11px 0 1px @white, 11px -35px 1px @white, 31px -35px 1px @white, 21px -24px 1px @white, 21px -11px 1px @white; 535 | .capacitors-keyframes(@name, @start) { 536 | @one: @start; 537 | @two: @one + 1%; 538 | @three: @two + 1%; 539 | @four: @three + 1%; 540 | @five: @four + 1%; 541 | .keyframes(@name, { 542 | 0% { box-shadow: none; } 543 | @{one} { box-shadow: 11px 0 1px transparent; } 544 | @{two} { box-shadow: 11px 0 1px @white, 11px -35px 1px transparent, 31px -35px 1px transparent; } 545 | @{three} { box-shadow: 11px 0 1px @white, 11px -35px 1px @white, 31px -35px 1px @white, 21px -24px 1px transparent; } 546 | @{four} { box-shadow: 11px 0 1px @white, 11px -35px 1px @white, 31px -35px 1px @white, 21px -24px 1px @white, 21px -11px 1px transparent; } 547 | @{five} { box-shadow: 11px 0 1px @white, 11px -35px 1px @white, 31px -35px 1px @white, 21px -24px 1px @white, 21px -11px 1px @white; } 548 | }); 549 | } 550 | 551 | .capacitors { 552 | position: absolute; 553 | z-index: @capacitors-z; 554 | width: 10px; 555 | height: 10px; 556 | border-radius: 50%; 557 | background-color: transparent; 558 | box-shadow: @capacitors-box-shadow; 559 | } 560 | 561 | @chip-capacitors-left: 240px; 562 | @chip-capacitors-top: 130px; 563 | .capacitors-keyframes(chip-capacitors, 12.5%); 564 | #chip-capacitors { 565 | left: @chip-capacitors-left; 566 | top: @chip-capacitors-top; 567 | .animation(chip-capacitors @gameboy-duration linear); 568 | } 569 | 570 | @motherboard-capacitors-left: 85px; 571 | @motherboard-capacitors-top: 265px; 572 | .capacitors-keyframes(motherboard-capacitors, 22.5%); 573 | #motherboard-capacitors { 574 | left: @motherboard-capacitors-left; 575 | top: @motherboard-capacitors-top; 576 | .transform(rotateZ(-90deg)); 577 | .animation(motherboard-capacitors @gameboy-duration linear); 578 | } 579 | 580 | ///// 581 | 582 | @contrast-knob-z: @motherboard-z + 1; 583 | @contrast-knob-top: 165px; 584 | @contrast-knob-left: 19px; 585 | @contrast-knob-size: 28px; 586 | @contrast-knob-offset: 15px; 587 | 588 | @contrast-knob-before-size: 32px; 589 | @contrast-knob-before-top: (@contrast-knob-size - @contrast-knob-before-size) / 2; 590 | @contrast-knob-before-left: -17px; 591 | .keyframes(contrast-knob, { 592 | 0% { width: 0; height: 0; left: @contrast-knob-left + @contrast-knob-size/2; top: @contrast-knob-top + @contrast-knob-offset + @contrast-knob-size/2; } 593 | 14% { width: 0; height: 0; left: @contrast-knob-left + @contrast-knob-size/2; top: @contrast-knob-top + @contrast-knob-offset + @contrast-knob-size/2; } 594 | 16.5% { width: @contrast-knob-size; height: @contrast-knob-size; left: @contrast-knob-left; top: @contrast-knob-top + @contrast-knob-offset; } 595 | 20% { top: @contrast-knob-top + @contrast-knob-offset; } 596 | 24% { top: @contrast-knob-top; } 597 | }); 598 | .keyframes(contrast-knob-before, { 599 | 0% { width: 0; height: 0; left: @contrast-knob-before-left + @contrast-knob-before-size/2; top: @contrast-knob-before-top + @contrast-knob-before-size/2; } 600 | 16% { width: 0; height: 0; left: @contrast-knob-before-left + @contrast-knob-before-size/2; top: @contrast-knob-before-top + @contrast-knob-before-size/2; } 601 | 18% { width: @contrast-knob-before-size; height: @contrast-knob-before-size; left: @contrast-knob-before-left; top: @contrast-knob-before-top; } 602 | }); 603 | 604 | #contrast-knob { 605 | z-index: @contrast-knob-z; 606 | position: absolute; 607 | top: @contrast-knob-top; 608 | left: @contrast-knob-left; 609 | width: @contrast-knob-size; 610 | height: @contrast-knob-size; 611 | background-color: @gray; 612 | .animation(contrast-knob @gameboy-duration linear); 613 | &:before { 614 | content: ''; 615 | position: absolute; 616 | top: @contrast-knob-before-top; 617 | left: @contrast-knob-before-left; 618 | width: @contrast-knob-before-size; 619 | height: @contrast-knob-before-size; 620 | border-radius: 50%; 621 | background-color: @darkgray; 622 | .animation(contrast-knob-before @gameboy-duration linear); 623 | } 624 | } 625 | 626 | ///// 627 | 628 | @link-port-z: @motherboard-z + 1; 629 | @link-port-top: 123px; 630 | @link-port-left: 3px; 631 | @link-port-size: 34px; 632 | @link-port-offset: 16px; 633 | .keyframes(link-port, { 634 | 0% { width: 0; height: 0; left: @link-port-left + @link-port-offset + @link-port-size/2; } 635 | 14% { width: 0; height: 0; left: @link-port-left + @link-port-offset + @link-port-size/2; } 636 | 16.5% { width: @link-port-size; height: @link-port-size; left: @link-port-left + @link-port-offset; } 637 | 18.5% { left: @link-port-left + @link-port-offset; } 638 | 20.5% { left: @link-port-left; } 639 | }); 640 | 641 | #link-port { 642 | z-index: @link-port-z; 643 | position: absolute; 644 | top: @link-port-top; 645 | left: @link-port-left; 646 | width: @link-port-size; 647 | height: @link-port-size; 648 | background-color: @white; 649 | .animation(link-port @gameboy-duration linear); 650 | } 651 | 652 | ///// 653 | 654 | @circuit-z: @motherboard-z + 1; 655 | @circuit-opacity: 0.5; 656 | .circuit-keyframes(@name, @start) { 657 | @opacity: @start - 0.1%; 658 | @before-name: "@{name}-before"; 659 | @after-name: "@{name}-after"; 660 | @before-start: @start; 661 | @before-end: @start + 2%; 662 | @after-start: @before-end; 663 | @after-end: @after-start + 2%; 664 | .keyframes(@name, { 665 | 0% { opacity: 0; } 666 | @{opacity} { opacity: 0; } 667 | @{start} { opacity: @circuit-opacity; } 668 | }); 669 | .keyframes(@before-name, { 670 | 0% { height: 100%; } 671 | @{before-start} { height: 100%; } 672 | @{before-end} { height: 0%; } 673 | }); 674 | .keyframes(@after-name, { 675 | 0% { height: 100%; } 676 | @{after-start} { height: 100%; } 677 | @{after-end} { height: 0%; } 678 | }); 679 | } 680 | .circuit { 681 | z-index: @circuit-z; 682 | position: absolute; 683 | box-shadow: inset 0 0 0 1px @white; 684 | border-radius: ~"50% / 25%"; 685 | opacity: @circuit-opacity; 686 | &::before { 687 | content: ""; 688 | position: absolute; 689 | left: 50%; 690 | top: 0; 691 | width: 50%; 692 | height: 0%; 693 | background-color: @motherboard-color; 694 | } 695 | &::after { 696 | content: ""; 697 | position: absolute; 698 | left: 0; 699 | bottom: 0; 700 | width: 50%; 701 | height: 0%; 702 | background-color: @motherboard-color; 703 | } 704 | } 705 | 706 | .circuit-keyframes(circuit-bottom, 13.5%); 707 | #circuit-bottom { 708 | width: 30px; 709 | height: 60px; 710 | top: 330px; 711 | left: 155px; 712 | .transform(rotateZ(-90deg)); 713 | .animation(circuit-bottom @gameboy-duration linear); 714 | &::before { 715 | .animation(circuit-bottom-before @gameboy-duration linear); 716 | } 717 | &::after { 718 | .animation(circuit-bottom-after @gameboy-duration linear); 719 | } 720 | } 721 | .circuit-keyframes(circuit-top, 16.5%); 722 | #circuit-top { 723 | width: 40px; 724 | height: 80px; 725 | top: 100px; 726 | left: 70px; 727 | .animation(circuit-top @gameboy-duration linear); 728 | &::before { 729 | .animation(circuit-top-before @gameboy-duration linear); 730 | } 731 | &::after { 732 | .animation(circuit-top-after @gameboy-duration linear); 733 | } 734 | } 735 | 736 | ///// 737 | 738 | @transistors-z: @motherboard-z + 1; 739 | @transistors-top: 310px; 740 | @transistors-left: 50px; 741 | @transistors-size: 8px; 742 | .keyframes(transistors, { 743 | 0% { opacity: 0; box-shadow: none; } 744 | 17% { opacity: 0; box-shadow: 16px 0 transparent; } 745 | 19% { opacity: 1; box-shadow: 16px 0, 32px 0 transparent; } 746 | 21% { box-shadow: 16px 0, 32px 0, 48px 0 transparent; } 747 | 23% { box-shadow: 16px 0, 32px 0, 48px 0; } 748 | }); 749 | 750 | #transistors { 751 | z-index: @transistors-z; 752 | position: absolute; 753 | top: @transistors-top; 754 | left: @transistors-left; 755 | width: @transistors-size; 756 | height: @transistors-size; 757 | border-radius: 50%; 758 | background-color: @darkgray; 759 | box-shadow: 16px 0, 32px 0, 48px 0; 760 | .animation(transistors @gameboy-duration linear); 761 | } 762 | 763 | ///// 764 | 765 | @processor-square: 56px; 766 | @processor-left: (@gameboy-width - @processor-square) / 2; 767 | @processor-top: @motherboard-top + 210px; 768 | @processor-z: @motherboard-z + 1; 769 | .keyframes(processor, { 770 | 0% { width: 0; height: 0; left: @gameboy-width / 2; top: @processor-top + @processor-square/2; } 771 | 12% { width: 0; height: 0; left: @gameboy-width / 2; top: @processor-top + @processor-square/2; } 772 | 14% { width: @processor-square; height: @processor-square; left: (@gameboy-width - @processor-square) / 2; top: @processor-top; } 773 | }); 774 | .keyframes(processor-before, { 775 | 0% { width: 0; } 776 | 16% { width: 0; } 777 | 18% { width: 50px; } 778 | }); 779 | .keyframes(processor-after, { 780 | 0% { width: 0; } 781 | 18% { width: 0; } 782 | 20% { width: 50px; } 783 | }); 784 | 785 | #processor { 786 | position: absolute; 787 | width: @processor-square; 788 | height: @processor-square; 789 | top: @processor-top; 790 | left: @processor-left; 791 | z-index: @processor-z; 792 | background-color: @black; 793 | color: @white; 794 | font-size: 15px; 795 | letter-spacing: 3px; 796 | font-weight: 700; 797 | font-family: 'Oxygen', Helvetica, arial, sans-serif; 798 | .animation(processor @gameboy-duration linear); 799 | &::before { 800 | content: "llllll"; 801 | position: absolute; 802 | width: 50px; 803 | overflow: hidden; 804 | text-shadow: -1px 0 0 @gray; 805 | .transform(rotateZ(-90deg)); 806 | .transform-origin(0 0); 807 | left: 48px; 808 | bottom: -9px; 809 | .animation(processor-before @gameboy-duration linear); 810 | } 811 | &::after { 812 | content: "llllll"; 813 | position: absolute; 814 | width: 50px; 815 | overflow: hidden; 816 | text-shadow: -1px 0 0 @gray; 817 | .transform(rotateZ(90deg) rotateY(180deg)); 818 | .transform-origin(0 0); 819 | left: 7px; 820 | top: 50px; 821 | .animation(processor-after @gameboy-duration linear); 822 | } 823 | } 824 | 825 | ///// 826 | 827 | @component-z: @motherboard-z + 1; 828 | @component-left: 228px; 829 | @component-offset: 16px; 830 | @component-top: @motherboard-top + 208px; 831 | @component-width: 14px; 832 | @component-height: 55px; 833 | .keyframes(component, { 834 | 0% { width: 0; height: 0; left: @component-left + @component-offset + @component-width/2; top: @component-top + @component-height/2; } 835 | 20.5% { width: 0; height: 0; left: @component-left + @component-offset + @component-width/2; top: @component-top + @component-height/2; } 836 | 23.5% { width: @component-width; height: @component-height; left: @component-left + @component-offset; top: @component-top; } 837 | 24.5% { left: @component-left + @component-offset; top: @component-top; } 838 | 28% { left: @component-left; top: @component-top; } 839 | }); 840 | 841 | #component { 842 | z-index: @component-z; 843 | position: absolute; 844 | top: @component-top; 845 | left: @component-left; 846 | background-color: @black; 847 | border-left: 2px @gray dotted; 848 | border-top-right-radius: 3px; 849 | border-bottom-right-radius: 3px; 850 | width: @component-width; 851 | height: @component-height; 852 | .animation(component @gameboy-duration linear); 853 | } 854 | 855 | ///// 856 | 857 | @controller-z: @motherboard-z + 1; 858 | @controller-width: 204px; 859 | @controller-height: 110px; 860 | @controller-top: @border-top + 370px; 861 | @controller-left: (@gameboy-width - @controller-width) / 2; 862 | .keyframes(controller, { 863 | 0% { width: 0; height: @controller-height; left: @gameboy-width/2; top: @controller-top; } 864 | 12% { width: 0; left: @gameboy-width/2; } 865 | 16% { width: @controller-width; left: (@gameboy-width - @controller-width)/2; } 866 | }); 867 | 868 | @controller-before-width: 18px; 869 | @controller-before-height: 6px; 870 | @controller-before-left: -@controller-before-width; 871 | @controller-before-bottom: 25px; 872 | .keyframes(controller-before, { 873 | 0% { width: 0; height: 0; left: @controller-before-left + @controller-before-width/2; bottom: @controller-before-bottom + @controller-before-height/2; } 874 | 18% { width: 0; height: 0; left: @controller-before-left + @controller-before-width/2; bottom: @controller-before-bottom + @controller-before-height/2; } 875 | 21.5% { width: @controller-before-width; height: @controller-before-height; left: @controller-before-left; bottom: @controller-before-bottom; } 876 | }); 877 | 878 | @controller-after-width: 114px; 879 | @controller-after-height: 24px; 880 | @controller-after-bottom: -@controller-after-height; 881 | @controller-after-left: (@controller-width - @controller-after-width)/2; 882 | .keyframes(controller-after, { 883 | 0% { width: 0; height: 0; left: @controller-width/2; bottom: 0; } 884 | 20% { width: 0; height: 0; left: @controller-width/2; bottom: 0; } 885 | 22.5% { width: @controller-after-width; height: @controller-after-height; left: @controller-after-left; bottom: @controller-after-bottom; } 886 | }); 887 | 888 | #controller { 889 | position: absolute; 890 | z-index: @controller-z; 891 | width: @controller-width; 892 | height: @controller-height; 893 | top: @controller-top; 894 | left: @controller-left; 895 | background-color: @lightgray; 896 | .animation(controller @gameboy-duration linear); 897 | &::before { 898 | content: ""; 899 | position: absolute; 900 | background-color: @black; 901 | width: @controller-before-width; 902 | height: @controller-before-height; 903 | left: -@controller-before-width; 904 | bottom: @controller-before-bottom; 905 | .animation(controller-before @gameboy-duration linear); 906 | } 907 | &::after { 908 | content: ""; 909 | position: absolute; 910 | width: @controller-after-width; 911 | height: @controller-after-height; 912 | bottom: @controller-after-bottom; 913 | left: @controller-after-left; 914 | background-color: @darkgray; 915 | .animation(controller-after @gameboy-duration linear); 916 | } 917 | } 918 | 919 | ///// 920 | 921 | @speaker-circle: 80px; 922 | @speaker-right: 20px; 923 | @speaker-bottom: 50px; 924 | @speaker-bottom-final: @speaker-bottom - 26px; 925 | @speaker-z: @controller-z + 1; 926 | .keyframes(speaker, { 927 | 0% { width: 0; height: 0; bottom: @speaker-bottom + @speaker-circle/2; right: @speaker-right + @speaker-circle/2; } 928 | 12% { width: 0; height: 0; bottom: @speaker-bottom + @speaker-circle/2; right: @speaker-right + @speaker-circle/2; } 929 | 15.5% { width: @speaker-circle; height: @speaker-circle; bottom: @speaker-bottom; right: @speaker-right; } 930 | 19.5% { bottom: @speaker-bottom; } 931 | 26% { bottom: @speaker-bottom-final; } 932 | }); 933 | 934 | #speaker { 935 | position: absolute; 936 | z-index: @speaker-z; 937 | width: @speaker-circle; 938 | height: @speaker-circle; 939 | right: @speaker-right; 940 | bottom: @speaker-bottom-final; 941 | border-radius: 100%; 942 | background-color: @black; 943 | .animation(speaker @gameboy-duration linear); 944 | &::after { 945 | content: ""; 946 | position: absolute; 947 | z-index: @speaker-z + 1; 948 | width: 42%; 949 | height: 42%; 950 | left: 50%; 951 | margin-left: -21%; 952 | top: 50%; 953 | margin-top: -21%; 954 | border-radius: 100%; 955 | background-color: @gray; 956 | } 957 | } 958 | 959 | ///// 960 | 961 | @whitescreen-z: @capacitors-z + 1; 962 | @whitescreen-width: 188px; 963 | @whitescreen-height: 170px; 964 | @whitescreen-top: @border-top + 35px; 965 | @whitescreen-left: (@gameboy-width - @whitescreen-width)/2; 966 | @whitescreen-border-width: 5px; 967 | .keyframes(whitescreen, { 968 | 0% { width: 0; height: 0; left: @gameboy-width/2; top: @whitescreen-top + 50px; border: 0px; } 969 | 22% { width: 0; height: 0; left: @gameboy-width/2; top: @whitescreen-top + 50px; } 970 | 26% { width: @whitescreen-width - @whitescreen-border-width*2; height: @whitescreen-height - @whitescreen-border-width*2; left: @whitescreen-left + @whitescreen-border-width; top: @whitescreen-top + @whitescreen-border-width; border: 0px transparent; } 971 | 28% { width: @whitescreen-width; height: @whitescreen-height; border: 5px @gray solid; left: @whitescreen-left; top: @whitescreen-top; } 972 | }); 973 | 974 | #whitescreen { 975 | position: absolute; 976 | z-index: @whitescreen-z; 977 | width: @whitescreen-width; 978 | height: @whitescreen-height; 979 | top: @whitescreen-top; 980 | left: @whitescreen-left; 981 | background-color: @white; 982 | border: @whitescreen-border-width @gray solid; 983 | .animation(whitescreen @gameboy-duration linear); 984 | } 985 | 986 | ///// 987 | 988 | @glass-width: @border-width - 24px; 989 | @glass-height: @border-height/2; 990 | @glass-z: @cover-z + 1; 991 | @glass-left: (@gameboy-width - @glass-width)/2; 992 | @glass-bottom: 278px; 993 | @glass-bottom-square: 372px; 994 | @glass-height-square: 34px; 995 | @glass-width-square: 36px; 996 | .keyframes(screen, { 997 | 0% { width: 0; height: 0; bottom: @glass-bottom-square + @glass-height-square/2; left: @gameboy-width/2; border-radius: 0; } 998 | 16% { width: 0; height: 0; bottom: @glass-bottom-square + @glass-height-square/2 ; left: @gameboy-width/2; border-radius: 0; } 999 | 19.5% { width: @glass-width-square; height: @glass-height-square; left: (@gameboy-width - @glass-width-square)/2; bottom: @glass-bottom-square; border-radius: 0; } 1000 | 23.5% { bottom: @glass-bottom; height: @glass-height-square; border-radius: 0 0 25% 25% ~"/" 0 0 10px 10px; } 1001 | 27.5% { height: @glass-height; width: @glass-width-square; left: (@gameboy-width - @glass-width-square)/2; border-radius: 0 0 50% 50% ~"/" 0 0 20px 20px; } 1002 | 32.5% { width: @glass-width; left: (@gameboy-width - @glass-width)/2; border-radius: 10px 10px 50% 50% ~"/" 10px 10px 20px 20px; } 1003 | }); 1004 | 1005 | #glass { 1006 | position: absolute; 1007 | z-index: @glass-z; 1008 | width: @glass-width; 1009 | height: @glass-height; 1010 | left: @glass-left; 1011 | bottom: @glass-bottom; 1012 | border-radius: 10px 10px 50% 50% ~"/" 10px 10px 20px 20px; 1013 | background-color: @black; 1014 | .animation(screen @gameboy-duration linear); 1015 | } 1016 | 1017 | ///// 1018 | 1019 | @glass-gameboy-text-top: 242px; 1020 | @glass-gameboy-text-left: 90px; 1021 | @glass-gameboy-text-width: 95px; 1022 | @glass-gameboy-text-z: @glass-z + 1; 1023 | .keyframes(glass-gameboy-text, { 1024 | 0% { width: 0; } 1025 | 38% { width: 0; } 1026 | 42% { width: @glass-gameboy-text-width; } 1027 | }); 1028 | 1029 | #glass-gameboy-text { 1030 | position: absolute; 1031 | z-index: @glass-gameboy-text-z; 1032 | top: @glass-gameboy-text-top; 1033 | left: @glass-gameboy-text-left; 1034 | width: @glass-gameboy-text-width; 1035 | color: @lightergray; 1036 | overflow: hidden; 1037 | font-size: 22px; 1038 | font-weight: 400; 1039 | font-style: italic; 1040 | font-family: 'Asap', sans-serif; 1041 | letter-spacing: -2px; 1042 | white-space: nowrap; 1043 | .transform(skew(-5deg)); 1044 | .animation(glass-gameboy-text @gameboy-duration linear); 1045 | } 1046 | 1047 | ///// 1048 | 1049 | @glass-color-text-z: @glass-z + 1; 1050 | @glass-color-text-left: 186px; 1051 | @glass-color-text-top: @glass-gameboy-text-top; 1052 | .keyframes(glass-color-text, { 1053 | 0% { color: transparent; } 1054 | 42% { color: transparent; } 1055 | 42.5% { color: @gameboy-red; } 1056 | }); 1057 | .keyframes(glass-color-text-before, { 1058 | 0% { color: transparent; border-color: transparent; } 1059 | 42.5% { border-color: transparent; } 1060 | 43% { color: transparent; border-color: @gameboy-purple; } 1061 | 43.5% { color: @gameboy-green; } 1062 | }); 1063 | .keyframes(glass-color-text-after, { 1064 | 0% { color: transparent; border-color: transparent; } 1065 | 43.5% { border-color: transparent; } 1066 | 44% { color: transparent; border-color: @gameboy-yellow; } 1067 | 44.5% { color: @gameboy-teal; } 1068 | }); 1069 | 1070 | #glass-color-text { 1071 | z-index: @glass-color-text-z; 1072 | color: @gameboy-red; 1073 | position: absolute; 1074 | top: @glass-color-text-top; 1075 | left: @glass-color-text-left; 1076 | font-family: 'Comic Sans', 'Comic Sans MS', 'ChalkboardSE-Bold', sans-serif, cursive; 1077 | font-size: 23px; 1078 | letter-spacing: -2px; 1079 | font-weight: 700; 1080 | .animation(glass-color-text @gameboy-duration linear); 1081 | &::before { 1082 | content: "L"; 1083 | position: absolute; 1084 | left: 12px; 1085 | top: 5px; 1086 | line-height: 5px; 1087 | text-indent: 10px; 1088 | color: @gameboy-green; 1089 | border: 4px @gameboy-purple solid; 1090 | border-radius: 50%; 1091 | width: 7px; 1092 | height: 7px; 1093 | .animation(glass-color-text-before @gameboy-duration linear); 1094 | } 1095 | &::after { 1096 | content: "R"; 1097 | position: absolute; 1098 | left: 36px; 1099 | top: 5px; 1100 | line-height: 5px; 1101 | text-indent: 10px; 1102 | color: @gameboy-teal; 1103 | border: 4px @gameboy-yellow solid; 1104 | border-radius: 50%; 1105 | width: 7px; 1106 | height: 7px; 1107 | .animation(glass-color-text-after @gameboy-duration linear); 1108 | } 1109 | } 1110 | 1111 | ///// 1112 | 1113 | @screen-width: 180px; 1114 | @screen-height: 160px; 1115 | @screen-width-square: 36px; 1116 | @screen-height-square: 32px; 1117 | @screen-top: @border-top + 40px; 1118 | @screen-left: (@gameboy-width - @screen-width)/2; 1119 | @screen-left-square: (@gameboy-width - @screen-width-square)/2; 1120 | @screen-top-square: @screen-top + 10px; 1121 | @screen-left-square: (@gameboy-width - @screen-width-square)/2; 1122 | @screen-top-rectangle: @screen-top-square + 60px; 1123 | @screen-color: @whitegray; 1124 | @screen-z: @glass-z + 1; 1125 | .keyframes(glass, { 1126 | 0% { width: 0; height: 0; top: @screen-top-square + @screen-height-square/2; left: @gameboy-width/2; } 1127 | 28% { width: 0; height: 0; top: @screen-top-square + @screen-height-square/2; left: @gameboy-width/2; } 1128 | 30% { width: @screen-width-square; height: @screen-height-square; top: @screen-top-square; left: @screen-left-square; } 1129 | 34% { top: @screen-top-rectangle; width: @screen-width-square; left: @screen-left-square; } 1130 | 37% { width: @screen-width; left: @screen-left; height: @screen-height-square; top: @screen-top-rectangle; } 1131 | 40% { height: @screen-height; top: @screen-top; } 1132 | }); 1133 | 1134 | #screen { 1135 | position: absolute; 1136 | z-index: @screen-z; 1137 | width: @screen-width; 1138 | height: @screen-height; 1139 | left: (@gameboy-width - @screen-width)/2; 1140 | top: @screen-top; 1141 | background-color: @screen-color; 1142 | .animation(glass @gameboy-duration linear); 1143 | } 1144 | 1145 | ///// 1146 | 1147 | @screen-gameboy-text-z: @screen-z + 1; 1148 | @screen-gameboy-text-left: -80px; 1149 | @screen-gameboy-text-top: 106px; 1150 | @screen-gameboy-text-width: 500px; 1151 | .keyframes(screen-gameboy-text, { 1152 | 0% { color: @gameboy-yellow; background-position: -120px; opacity: 0; } 1153 | 63.9% { opacity: 0; } 1154 | 64% { color: @gameboy-yellow; background-position: -120px; opacity: 1; } 1155 | 66.5% { color: @gameboy-yellow; } 1156 | 67% { color: @gameboy-red; } 1157 | 69.5% { color: @gameboy-red; } 1158 | 70% { color: screen(@gameboy-red, @gameboy-purple); } 1159 | 72.5% { color: screen(@gameboy-red, @gameboy-purple); } 1160 | 73% { color: @gameboy-green; } 1161 | 75.5% { color: @gameboy-green; } 1162 | 76% { color: saturate(@gameboy-purple, 30%); } 1163 | 78% { background-position: 130px; } 1164 | 87% { opacity: 1; } 1165 | 92% { opacity: 0; } 1166 | }); 1167 | 1168 | #screen-gameboy-text { 1169 | position: absolute; 1170 | font-family: 'Asap', sans-serif; 1171 | font-size: 32px; 1172 | font-weight: 700; 1173 | font-style: italic; 1174 | letter-spacing: -2px; 1175 | text-align: center; 1176 | opacity: 0; 1177 | width: @screen-gameboy-text-width; 1178 | left: @screen-gameboy-text-left; 1179 | top: @screen-gameboy-text-top; 1180 | .transform(skew(-5deg)); 1181 | overflow: hidden; 1182 | white-space: nowrap; 1183 | z-index: @screen-gameboy-text-z; 1184 | color: saturate(@gameboy-purple, 30%); 1185 | background: -webkit-linear-gradient(0deg, saturate(@gameboy-purple, 30%) 40%, @gameboy-green 40%, @gameboy-green 45%, screen(@gameboy-red, @gameboy-purple) 45%, screen(@gameboy-red, @gameboy-purple) 50%, @gameboy-red 50%, @gameboy-red 55%, @gameboy-yellow 55%, @gameboy-yellow 60%, @screen-color 60%); 1186 | background-position: 130px; 1187 | -webkit-background-clip: text; 1188 | -webkit-text-fill-color: transparent; 1189 | .animation(screen-gameboy-text @gameboy-duration linear); 1190 | } 1191 | 1192 | ///// 1193 | 1194 | @screen-nintendo-text-z: @screen-z + 1; 1195 | @screen-nintendo-text-top: 167px; 1196 | @screen-nintendo-text-left: 138px; 1197 | .keyframes(screen-nintendo-text, { 1198 | 0% { opacity: 0; } 1199 | 56% { opacity: 0; } 1200 | 57% { opacity: 1; } 1201 | 87% { opacity: 1; } 1202 | 92% { opacity: 0; } 1203 | }); 1204 | 1205 | #screen-nintendo-text { 1206 | z-index: @screen-nintendo-text-z; 1207 | position: absolute; 1208 | opacity: 0; 1209 | top: @screen-nintendo-text-top; 1210 | left: @screen-nintendo-text-left; 1211 | font-family: Arial Black, sans-serif; 1212 | font-weight: 700; 1213 | font-size: 13px; 1214 | .animation(screen-nintendo-text @gameboy-duration linear); 1215 | } 1216 | 1217 | ///// 1218 | 1219 | @joystick-pad-z: @controller-z + 1; 1220 | @joystick-pad-size: 110px; 1221 | @joystick-pad-left: @border-right; 1222 | @joystick-pad-bottom: 130px; 1223 | .keyframes(joystick-pad, { 1224 | 0% { width: 0; height: 0; left: @joystick-pad-left + @joystick-pad-size/2; bottom: @joystick-pad-bottom + @joystick-pad-size/2; border: 0 transparent solid; box-shadow: 0 0; } 1225 | 14% { width: 0; height: 0; left: @joystick-pad-left + @joystick-pad-size/2; bottom: @joystick-pad-bottom + @joystick-pad-size/2; } 1226 | 18% { width: @joystick-pad-size; height: @joystick-pad-size; left: @joystick-pad-left; bottom: @joystick-pad-bottom; } 1227 | 18.5% { border: 0 transparent solid; } 1228 | 20% { box-shadow: 0 0; } 1229 | 20.5% { border: 5px @gray solid; } 1230 | 21.5% { border-width: 5px; box-shadow: 2px 4px; } 1231 | 22% { border-width: 4px; box-shadow: 2px 3px; } 1232 | }); 1233 | 1234 | #joystick-pad { 1235 | position: absolute; 1236 | z-index: @joystick-pad-z; 1237 | width: @joystick-pad-size; 1238 | height: @joystick-pad-size; 1239 | border-radius: 100%; 1240 | border: 4px @gray solid; 1241 | box-shadow: 2px 3px; 1242 | background-color: @whitegray; 1243 | left: @joystick-pad-left; 1244 | bottom: @joystick-pad-bottom; 1245 | .animation(joystick-pad @gameboy-duration linear); 1246 | } 1247 | 1248 | ///// 1249 | 1250 | @joystick-z: @cover-z + 1; 1251 | .keyframes(joystick, { 1252 | 0% { color: transparent; font-size: 12px; line-height: 101px; text-indent: 54px; } 1253 | 18% { font-size: 12px; line-height: 101px; text-indent: 54px; } 1254 | 20% { color: transparent; } 1255 | 23.5% { color: @black; font-size: 102px; line-height: 44px; text-indent: 43px; } 1256 | }); 1257 | .keyframes(joystick-control, { 1258 | 0% { width: 0; height: 0; padding: 0; padding-top: 5px; font-size: 0; line-height: 1px; color: transparent; top: 55px; left: 55px; } 1259 | 18% { width: 0; height: 0; padding: 0; padding-top: 5px; font-size: 0; line-height: 1px; color: transparent; top: 55px; left: 55px; } 1260 | 20% { color: transparent; } 1261 | 23.5% { width: 26px; height: 86px; padding-left: 5px; padding-right: 5px; padding-top: 0; font-size: 16px; line-height: 21px; color: @black; top: 12px; left: 42px; } 1262 | }); 1263 | 1264 | #joystick { 1265 | position: absolute; 1266 | z-index: @joystick-z; 1267 | width: @joystick-pad-size; 1268 | height: @joystick-pad-size; 1269 | bottom: @joystick-pad-bottom; 1270 | left: @joystick-pad-left; 1271 | font-size: 102px; 1272 | font-weight: 700; 1273 | font-family: 'Oxygen', Helvetica, arial, sans-serif; 1274 | line-height: 44px; 1275 | text-indent: 43px; 1276 | color: @black; 1277 | .animation(joystick @gameboy-duration linear); 1278 | &::before, 1279 | &::after { 1280 | position: absolute; 1281 | content: "\025B2\03000\03000\025BC"; 1282 | box-sizing: border-box; 1283 | z-index: -1; 1284 | left: 42px; 1285 | top: 12px; 1286 | text-indent: 0; 1287 | width: 26px; 1288 | height: 86px; 1289 | padding-left: 5px; 1290 | padding-right: 5px; 1291 | line-height: 21px; 1292 | border-radius: 3px; 1293 | background-color: @darkgray; 1294 | word-wrap: break-word; 1295 | text-align: center; 1296 | font-size: 16px; 1297 | color: @black; 1298 | .animation(joystick-control @gameboy-duration linear); 1299 | } 1300 | &::after { 1301 | .transform(rotateZ(-90deg)); 1302 | } 1303 | } 1304 | 1305 | ///// 1306 | 1307 | @control-z: @controller-z + 1; 1308 | @control-width: 122px; 1309 | @control-height: 52px; 1310 | @control-bottom: 160px; 1311 | @control-right: 25px; 1312 | .keyframes(control, { 1313 | 0% { width: 0; height: 0; border: 0 transparent solid; box-shadow: 0 0; right: @control-right + @control-width/2; bottom: @control-bottom + @control-height/2; } 1314 | 16% { width: 0; height: 0; right: @control-right + @control-width/2; bottom: @control-bottom + @control-height/2; .transform(rotate(18deg)); } 1315 | 18.5% { width: @control-width; height: @control-height; right: @control-right; bottom: @control-bottom; .transform(rotate(-18deg)); } 1316 | 20% { border: 0 @gray solid; } 1317 | 22% { border-width: 6px; box-shadow: 0 0; } 1318 | 24% { border-width: 4px; box-shadow: 0 4px; } 1319 | 26% { box-shadow: 0 3px } 1320 | 100% { .transform(rotate(-18deg)); } 1321 | }); 1322 | 1323 | #control { 1324 | position: absolute; 1325 | z-index: @control-z; 1326 | background-color: @whitegray; 1327 | width: @control-width; 1328 | height: @control-height; 1329 | bottom: @control-bottom; 1330 | right: @control-right; 1331 | border-radius: ~"20% / 50%"; 1332 | border: 4px @gray solid; 1333 | box-shadow: 0 3px; 1334 | .transform(rotate(-18deg)); 1335 | .animation(control @gameboy-duration linear); 1336 | } 1337 | 1338 | ///// 1339 | 1340 | @control-button-z: @cover-z + 1; 1341 | @control-button-circle: 40px; 1342 | @control-button-font-size: 25px; 1343 | .control-button { 1344 | position: absolute; 1345 | z-index: @control-button-z; 1346 | width: @control-button-circle; 1347 | height: @control-button-circle; 1348 | background-color: @darkgray; 1349 | border-radius: 100%; 1350 | color: transparent; 1351 | text-shadow: 0 0 1px @black; 1352 | line-height: 38px; 1353 | text-align: center; 1354 | font-size: @control-button-font-size; 1355 | font-weight: 300; 1356 | font-family: 'Oxygen', Helvetica, arial, sans-serif; 1357 | } 1358 | 1359 | ///// 1360 | 1361 | @control-b-right: @control-right + 72px; 1362 | @control-b-bottom: @control-bottom - 4px; 1363 | .keyframes(control-b, { 1364 | 0% { width: 0; height: 0; right: @control-b-right + @control-button-circle/2; bottom: @control-b-bottom + @control-button-circle/2; font-size: 0; } 1365 | 18.5% { width: 0; height: 0; right: @control-b-right + @control-button-circle/2; bottom: @control-b-bottom + @control-button-circle/2; } 1366 | 20% { font-size: 0; } 1367 | 21% { width: @control-button-circle; height: @control-button-circle; right: @control-b-right; bottom: @control-b-bottom; font-size: @control-button-font-size; } 1368 | }); 1369 | 1370 | #control-b { 1371 | right: @control-b-right; 1372 | bottom: @control-b-bottom; 1373 | .animation(control-b @gameboy-duration linear); 1374 | } 1375 | 1376 | ///// 1377 | 1378 | @control-a-right: @control-right + 9px; 1379 | @control-a-bottom: @control-bottom + 16px; 1380 | .keyframes(control-a, { 1381 | 0% { width: 0; height: 0; right: @control-a-right + @control-button-circle/2; bottom: @control-a-bottom + @control-button-circle/2; font-size: 0; } 1382 | 20% { width: 0; height: 0; right: @control-a-right + @control-button-circle/2; bottom: @control-a-bottom + @control-button-circle/2; } 1383 | 21.5% { font-size: 0; } 1384 | 22.5% { width: @control-button-circle; height: @control-button-circle; right: @control-a-right; bottom: @control-a-bottom; font-size: 25px; } 1385 | }); 1386 | 1387 | #control-a { 1388 | right: @control-a-right; 1389 | bottom: @control-a-bottom; 1390 | .animation(control-a @gameboy-duration linear); 1391 | } 1392 | 1393 | ///// 1394 | 1395 | @start-select-box-width: 100px; 1396 | @start-select-box-height: 25px; 1397 | @start-select-box-bottom: 85px; 1398 | @start-select-box-border: 4px; 1399 | @start-select-box-left: (@gameboy-width - @start-select-box-width)/2; 1400 | @start-select-box-z: @controller-z + 1; 1401 | .keyframes(start-select-box, { 1402 | 0% { width: 0; left: @gameboy-width/2; } 1403 | 18% { width: 0; left: @gameboy-width/2; } 1404 | 21.5% { width: @start-select-box-width; left: @start-select-box-left; } 1405 | }); 1406 | 1407 | @start-select-pad-width: 40px; 1408 | @start-select-pad-height: 13px; 1409 | @start-select-pad-z: @start-select-box-z + 1; 1410 | @start-select-pad-bottom: 2px; 1411 | @start-select-pad-offset: 5px; 1412 | @start-select-pad-tweak: 4px; 1413 | @start-select-pad-color: @lightgray; 1414 | @start-select-pad-box-shadow: @start-select-box-width - @start-select-pad-offset * 2 - @start-select-pad-width; 1415 | @start-select-pad-box-shadow-offset: @start-select-box-width - @start-select-pad-width - (@start-select-pad-offset * 2) + (@start-select-pad-tweak * 2); 1416 | .keyframes(start-select-pad, { 1417 | 0% { width: 0; height: 0; left: @start-select-pad-offset - @start-select-pad-tweak + @start-select-pad-width/2; bottom: @start-select-pad-bottom + @start-select-pad-height/2; box-shadow: @start-select-pad-box-shadow-offset 0 @start-select-pad-color; } 1418 | 22% { width: 0; height: 0; left: @start-select-pad-offset - @start-select-pad-tweak + @start-select-pad-width/2; bottom: @start-select-pad-bottom + @start-select-pad-height/2; box-shadow: @start-select-pad-box-shadow-offset 0 @start-select-pad-color; } 1419 | 26% { width: @start-select-pad-width; height: @start-select-pad-height; left: @start-select-pad-offset - @start-select-pad-tweak; bottom: @start-select-pad-bottom; box-shadow: @start-select-pad-box-shadow-offset 0 @start-select-pad-color; } 1420 | 28.5% { left: @start-select-pad-offset; box-shadow: @start-select-pad-box-shadow 0 @start-select-pad-color; } 1421 | }); 1422 | 1423 | #start-select-box { 1424 | border-top: @start-select-box-border @gray solid; 1425 | border-bottom: @start-select-box-border @gray solid; 1426 | position: absolute; 1427 | z-index: @start-select-box-z; 1428 | width: @start-select-box-width; 1429 | height: @start-select-box-height; 1430 | bottom: @start-select-box-bottom; 1431 | left: @start-select-box-left; 1432 | background-color: @whitegray; 1433 | .animation(start-select-box @gameboy-duration linear); 1434 | &::before { 1435 | content: ""; 1436 | position: absolute; 1437 | z-index: @start-select-pad-z; 1438 | bottom: @start-select-pad-bottom; 1439 | width: @start-select-pad-width; 1440 | height: @start-select-pad-height; 1441 | border-radius: 10px; 1442 | background-color: @start-select-pad-color; 1443 | left: @start-select-pad-offset; 1444 | box-shadow: @start-select-pad-box-shadow 0 @start-select-pad-color; 1445 | .animation(start-select-pad @gameboy-duration linear); 1446 | } 1447 | } 1448 | 1449 | ///// 1450 | 1451 | @start-select-button-width: 32px; 1452 | @start-select-button-height: 9px; 1453 | @start-select-button-bottom: @start-select-box-bottom + @start-select-box-border + @start-select-pad-bottom + (@start-select-pad-height - @start-select-button-height) / 2; 1454 | @start-select-button-z: @cover-z + 1; 1455 | @start-select-button-offset: @start-select-pad-offset + (@start-select-pad-width - @start-select-button-width)/2; 1456 | @start-select-button-left: @start-select-box-left + @start-select-button-offset; 1457 | @start-select-button-box-shadow: @start-select-box-width - @start-select-button-width - @start-select-button-offset * 2; 1458 | .keyframes(start-select-button, { 1459 | 0% { width: 0; height: 0; bottom: @start-select-button-bottom + @start-select-button-height/2; left: @start-select-button-left + @start-select-button-width/2; } 1460 | 29.5% { width: 0; height: 0; bottom: @start-select-button-bottom + @start-select-button-height/2; left: @start-select-button-left + @start-select-button-width/2; } 1461 | 34% { width: @start-select-button-width; height: @start-select-button-height; bottom: @start-select-button-bottom; left: @start-select-button-left; } 1462 | }); 1463 | 1464 | #start-select-button { 1465 | position: absolute; 1466 | z-index: @start-select-button-z; 1467 | width: @start-select-button-width; 1468 | height: @start-select-button-height; 1469 | bottom: @start-select-button-bottom; 1470 | left: @start-select-button-left; 1471 | background-color: @darkgray; 1472 | border-radius: ~"80% / 100%"; 1473 | box-shadow: @start-select-button-box-shadow 0 @darkgray; 1474 | .animation(start-select-button @gameboy-duration linear); 1475 | } 1476 | 1477 | ///// 1478 | 1479 | @cover-v-slices: 10; // 10, 17, 20, 34 1480 | @cover-v-width: @canvas-width / @cover-v-slices; 1481 | @cover-v-height: @canvas-height; 1482 | .cover-v-box-shadow(@color, @counter, @current : @counter + 1) when (@counter > 0) { 1483 | .cover-v-box-shadow(@color, @counter - 1, @current); 1484 | & when (@counter < @current) { 1485 | box-shadow+: @cover-v-width*@counter 0 @color; 1486 | } 1487 | & when (@counter = @current) { 1488 | box-shadow+: @cover-v-width*@counter @cover-v-height/2 @color; 1489 | } 1490 | & when (@counter > @current) { 1491 | box-shadow+: @cover-v-width*@counter @cover-v-height @color; 1492 | } 1493 | } 1494 | .cover-v-box-shadow-keyframes(@color, @startPercentage, @endPercentage, @slices, @counter : 0) when (@counter <= @slices) { 1495 | @increment: (@endPercentage - @startPercentage) / (@slices + 1); 1496 | @currentPercentage: @startPercentage + @increment * @counter; 1497 | & when (@counter = 0) { 1498 | @{startPercentage} { width: @cover-v-width; height: 0 } 1499 | } 1500 | & when (@counter = 1) { 1501 | @{currentPercentage} { height: @cover-v-height/2; .cover-v-box-shadow(@color, @slices - 1, 0) } 1502 | } 1503 | & when (@counter = 2) { 1504 | @{currentPercentage} { height: @cover-v-height; .cover-v-box-shadow(@color, @slices - 1, 1) } 1505 | } 1506 | & when (@counter > 2) and (@counter < @slices) { 1507 | @{currentPercentage} { .cover-v-box-shadow(@color, @slices - 1, @counter - 1) } 1508 | } 1509 | & when (@counter = @slices) { 1510 | @{currentPercentage} { .cover-v-box-shadow(@color, @slices - 1, @counter - 1) } 1511 | @{endPercentage} { .cover-v-box-shadow(@color, @slices - 1) } 1512 | } 1513 | .cover-v-box-shadow-keyframes(@color, @startPercentage, @endPercentage, @slices, @counter + 1); 1514 | } 1515 | 1516 | #cover-vertical { 1517 | position: absolute; 1518 | z-index: @cover-z - 1; 1519 | width: @cover-v-width; 1520 | height: @cover-v-height; 1521 | bottom: 0; 1522 | } 1523 | 1524 | #gameboy { 1525 | .-(@i: length(@gameboy-colors)) when (@i > 0) { 1526 | @name: extract(@gameboy-colors, @i); 1527 | @color: %("gameboy-%s", @name); 1528 | .keyframes(~"cover-vertical-@{name}", { 1529 | 0% { width: 0; height: 0; box-shadow: none; } 1530 | .cover-v-box-shadow-keyframes(@@color, 39%, 49%, @cover-v-slices); 1531 | }); 1532 | &.@{name} { 1533 | #cover-vertical { 1534 | background-color: @@color; 1535 | .animation(~"cover-vertical-@{name}" @gameboy-duration linear); 1536 | .cover-v-box-shadow(@@color, @cover-v-slices - 1); 1537 | } 1538 | } 1539 | .-((@i - 1)); 1540 | } .-; 1541 | } 1542 | 1543 | ///// 1544 | 1545 | @cover-h-slices: 15; // 10, 15, 19, 30, 38 1546 | @cover-h-width: @canvas-width; 1547 | @cover-h-height: @canvas-height / @cover-h-slices; 1548 | .cover-h-box-shadow(@color, @counter, @current : @counter + 1) when (@counter > 0) { 1549 | .cover-h-box-shadow(@color, @counter - 1, @current); 1550 | & when (@counter < @current) { 1551 | box-shadow+: 0 -@cover-h-height*@counter @color; 1552 | } 1553 | & when (@counter = @current) { 1554 | box-shadow+: -@cover-h-width/2 -@cover-h-height*@counter @color; 1555 | } 1556 | & when (@counter > @current) { 1557 | box-shadow+: -@cover-h-width -@cover-h-height*@counter @color; 1558 | } 1559 | } 1560 | .cover-h-box-shadow-keyframes(@color, @startPercentage, @endPercentage, @slices, @counter : 0) when (@counter <= @slices) { 1561 | @increment: (@endPercentage - @startPercentage) / (@slices + 1); 1562 | @currentPercentage: @startPercentage + @increment * @counter; 1563 | & when (@counter = 0) { 1564 | @{currentPercentage} { width: 0; height: @cover-h-height; } 1565 | } 1566 | & when (@counter = 1) { 1567 | @{currentPercentage} { width: @cover-h-width/2; .cover-h-box-shadow(@color, @slices - 1, 0) } 1568 | } 1569 | & when (@counter = 2) { 1570 | @{currentPercentage} { width: @cover-h-width; .cover-h-box-shadow(@color, @slices - 1, 1) } 1571 | } 1572 | & when (@counter > 2) and (@counter < @slices) { 1573 | @{currentPercentage} { .cover-h-box-shadow(@color, @slices - 1, @counter - 1) } 1574 | } 1575 | & when (@counter = @slices) { 1576 | @{currentPercentage} { .cover-h-box-shadow(@color, @slices - 1, @counter - 1) } 1577 | @{endPercentage} { .cover-h-box-shadow(@color, @slices - 1) } 1578 | } 1579 | .cover-h-box-shadow-keyframes(@color, @startPercentage, @endPercentage, @slices, @counter + 1); 1580 | } 1581 | 1582 | #cover-horizontal { 1583 | position: absolute; 1584 | z-index: @cover-z - 1; 1585 | width: @cover-h-width; 1586 | height: @cover-h-height; 1587 | bottom: 0; 1588 | left: 0; 1589 | } 1590 | 1591 | #gameboy { 1592 | .-(@i: length(@gameboy-colors)) when (@i > 0) { 1593 | @name: extract(@gameboy-colors, @i); 1594 | @color: %("gameboy-%s", @name); 1595 | .keyframes(~"cover-horizontal-@{name}", { 1596 | 0% { width: 0; height: 0; box-shadow: none; } 1597 | .cover-h-box-shadow-keyframes(@@color, 39%, 49%, @cover-h-slices); 1598 | }); 1599 | &.@{name} { 1600 | #cover-horizontal { 1601 | background-color: @@color; 1602 | .animation(~"cover-horizontal-@{name}" @gameboy-duration linear); 1603 | .cover-h-box-shadow(@@color, @cover-h-slices - 1); 1604 | } 1605 | } 1606 | .-((@i - 1)); 1607 | } .-; 1608 | } 1609 | 1610 | ///// 1611 | 1612 | @gloss-width: 232px; 1613 | @gloss-height: 250px; 1614 | @gloss-z: @cover-z; 1615 | @gloss-top: 275px; 1616 | @gloss-left: 54px; 1617 | .keyframes(gloss, { 1618 | 0% { width: 0; height: 0; left: @gloss-left + @gloss-width/2; } 1619 | 46% { width: 0; height: 0; left: @gloss-left + @gloss-width/2; } 1620 | 52% { width: @gloss-width; height: @gloss-height; left: @gloss-left; } 1621 | }); 1622 | #gloss { 1623 | position: absolute; 1624 | z-index: @gloss-z; 1625 | width: @gloss-width; 1626 | height: @gloss-height; 1627 | top: @gloss-top; 1628 | left: @gloss-left; 1629 | border-bottom-left-radius: @gloss-width/2 20px; 1630 | border-bottom-right-radius: @gloss-width/2 20px; 1631 | .animation(gloss @gameboy-duration linear); 1632 | } 1633 | 1634 | #gameboy { 1635 | .-(@i: length(@gameboy-colors)) when (@i > 0) { 1636 | @name: extract(@gameboy-colors, @i); 1637 | @color: %("gameboy-%s", @name); 1638 | &.@{name} { 1639 | #gloss { 1640 | background-color: tint(@@color, extract(@gameboy-gloss-tints, @i)); 1641 | } 1642 | } 1643 | .-((@i - 1)); 1644 | } .-; 1645 | } 1646 | 1647 | ///// 1648 | 1649 | @speaker-holes-z: @cover-z + 1; 1650 | @speaker-holes-width: 5px; 1651 | @speaker-holes-height: 5px; 1652 | @speaker-holes-bottom: 42px; 1653 | @speaker-holes-left: 244px; 1654 | @speaker-holes-offset-x: 9.5px; 1655 | @speaker-holes-offset-y: 8px; 1656 | @speaker-holes-color: @black; 1657 | .speaker-holes-box-shadow(@start-x, @start-y, @counter) when (@counter > 0) { 1658 | .speaker-holes-box-shadow(@start-x, @start-y, @counter - 1); 1659 | box-shadow+: (@start-x + (@speaker-holes-offset-x * (@counter - 1))) (@start-y + (@speaker-holes-offset-y * (@counter - 1))) @speaker-holes-color; 1660 | } 1661 | .speaker-holes-box-shadow-generate() { 1662 | .speaker-holes-box-shadow(9.5px, 8px, 2); 1663 | .speaker-holes-box-shadow(0, -19px, 5); 1664 | .speaker-holes-box-shadow(0, -38px, 7); 1665 | .speaker-holes-box-shadow(9.5px, -49px, 7); 1666 | .speaker-holes-box-shadow(28px, -52px, 5); 1667 | .speaker-holes-box-shadow(47px, -56px, 3); 1668 | } 1669 | .keyframes(speaker-holes, { 1670 | 0% { width: 0; } 1671 | 41% { width: 0; } 1672 | 42% { width: @speaker-holes-width; } 1673 | }); 1674 | 1675 | #speaker-holes { 1676 | background-color: @speaker-holes-color; 1677 | width: @speaker-holes-width; 1678 | height: @speaker-holes-height; 1679 | position: absolute; 1680 | bottom: @speaker-holes-bottom; 1681 | left: @speaker-holes-left; 1682 | z-index: @speaker-holes-z; 1683 | border-radius: 50%; 1684 | .speaker-holes-box-shadow-generate(); 1685 | .animation(speaker-holes @gameboy-duration linear); 1686 | } 1687 | 1688 | ///// 1689 | 1690 | @power-z: @glass-z + 1; 1691 | @power-left: 35px; 1692 | @power-top: 95px; 1693 | @power-width: 8px; 1694 | @power-height: 8px; 1695 | @power-decor-gray: @lightergray; 1696 | @power-decor-black: @black; 1697 | .power-box-shadow(@color) { 1698 | box-shadow: 5px 0 @black, 8px 0 @color, 12px 0 @black, 15px 0 @color, 19px 0 @black, 22px 0 @color; 1699 | } 1700 | .keyframes(power, { 1701 | 0% { opacity: 0; background-color: @darkgray; box-shadow: none; } 1702 | 36% { opacity: 0; } 1703 | 37% { opacity: 1; } 1704 | 39% { .power-box-shadow(@black); } 1705 | 40% { .power-box-shadow(@lightergray); } 1706 | 54% { background-color: @darkgray; } 1707 | 55% { background-color: @gameboy-red; } 1708 | }); 1709 | 1710 | #power { 1711 | position: absolute; 1712 | z-index: @power-z; 1713 | top: @power-top; 1714 | left: @power-left; 1715 | width: @power-width; 1716 | height: @power-height; 1717 | border-radius: 50%; 1718 | background-color: @gameboy-red; 1719 | .power-box-shadow(@lightergray); 1720 | .animation(power @gameboy-duration linear); 1721 | } 1722 | 1723 | ///// MIXINS 1724 | 1725 | .keyframes(@name; @arguments) { 1726 | @-moz-keyframes @name { @arguments(); } 1727 | @-webkit-keyframes @name { @arguments(); } 1728 | @keyframes @name { @arguments(); } 1729 | } 1730 | 1731 | .transform(@rules) { 1732 | -webkit-transform: @rules; 1733 | transform: @rules; 1734 | } 1735 | 1736 | .animation(@rules) { 1737 | -webkit-animation+: @rules; 1738 | animation+: @rules; 1739 | } 1740 | 1741 | .transform-origin(@rules) { 1742 | -webkit-transform-origin: @rules; 1743 | transform-origin: @rules; 1744 | } 1745 | 1746 | .border-radius-fix() { 1747 | -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 1748 | } 1749 | 1750 | ///// COLOR SELECTION 1751 | 1752 | #colors { 1753 | font-family: 'Oxygen', Helvetica, arial, sans-serif; 1754 | font-weight: 300; 1755 | width: 100%; 1756 | margin: 0 auto 40px; 1757 | text-align: center; 1758 | span { 1759 | vertical-align: top; 1760 | } 1761 | .color { 1762 | cursor: pointer; 1763 | width: 20px; 1764 | height: 20px; 1765 | display: inline-block; 1766 | margin-left: 5px; 1767 | border-radius: 3px; 1768 | &.active, 1769 | &:hover { 1770 | opacity: 1 !important; 1771 | } 1772 | &[data-color="transparent"] { 1773 | border: 1px @lightgray dotted; 1774 | opacity: 0.4; 1775 | background: @gameboy-transparent; 1776 | } 1777 | &[data-color="red"] { 1778 | opacity: 0.1; 1779 | background: @gameboy-red; 1780 | } 1781 | &[data-color="purple"] { 1782 | opacity: 0.1; 1783 | background: @gameboy-purple; 1784 | } 1785 | &[data-color="green"] { 1786 | opacity: 0.2; 1787 | background: @gameboy-green; 1788 | } 1789 | &[data-color="yellow"] { 1790 | opacity: 0.3; 1791 | background: @gameboy-yellow; 1792 | } 1793 | &[data-color="teal"] { 1794 | opacity: 0.15; 1795 | background: @gameboy-teal; 1796 | } 1797 | } 1798 | } 1799 | 1800 | -------------------------------------------------------------------------------- /animated-gameboy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bchanx/animated-gameboy-in-css/f990845e817078501c06b3a019b15574a82c4cfd/animated-gameboy.gif --------------------------------------------------------------------------------