Beitrag Mi Mär 23, 2016 9:35 am

Thema: CSS3 C64, a Commodore 64 demo in your browser
original website https://pixelambacht.nl/2013/css3-c64/

This is the link to see the demo in action https://pixelambacht.nl/demo/css3-c64/

html script of the page :

    1 <!doctype html>
    2 <html>
    3 <head>
    4 <title>CSS3 C64 by Pixelambacht</title>
    5 <link href="css.css" rel="stylesheet">
    6 <script src="prefixfree.min.js"></script>
    7 </head>
    8 <body>
    9 <textarea class="spacebar" required autofocus spellcheck="false"></textarea>
    10 <section class="bluescreen">
    11 <ul class="loading">
    12 <li>
    13 <li>
    14 <li>
    15 <li>
    16 <li>
    17 </ul>
    18 </section>
    19 <section class="introscreen">
    20 <div class="logo"></div>
    21 <ul class="presents">
    22 <li>
    23 <li>
    24 </ul>
    25 <ul class="starfield">
    26 <li>
    27 <li>
    28 <li>
    29 <li>
    30 <li>
    31 <li><br>
    32 <li>
    33 <li>
    34 <li>
    35 <li>
    36 <li>
    37 <li><br>
    38 <li>
    39 <li>
    40 <li>
    41 <li>
    42 <li>
    43 <li><br>
    44 </ul>
    45 <p class="scrolltext"></p>
    46 </section>
    47 <a href="http://pixelambacht.nl/2013/css3-c64/" class="credits">CSS3 C64 By Pixelambacht </a>
    48 </body>
    49 </html>

And this is the CSS script :

    165 @keyframes decrunch {
    166 /* Firefox and IE10 won't animate linear-gradients, so we fall back to full border color change */
    167 20% {
    168 background: #b8b8b8;
    169 background-image: linear-gradient(to bottom, #ffffff 5%,#000000 5%,#000000 10%,#b8b8b8 10%,#b8b8b8 16%,#5090d0 16%,#5090d0 23%,#98ff98 23%,#98ff98 28%,#808080 28%,#808080 33%,#484848 33%,#484848 40%,#c87870 40%,#c87870 46%,#472b1b 46%,#472b1b 51%,#a04800 51%,#a04800 57%,#f0e858 57%,#f0e858 62%,#181090 62%,#181090 69%,#50b818 69%,#50b818 78%,#a838a0 78%,#a838a0 86%,#68d0a8 86%,#68d0a8 95%,#882000 95%);
    170 }
    171 40% {
    172 background: #484848;
    173 background-image: linear-gradient(to bottom, #882000 10%,#68d0a8 10%,#68d0a8 12%,#a838a0 12%,#a838a0 18%,#50b818 18%,#50b818 27%,#181090 27%,#181090 38%,#f0e858 38%,#f0e858 41%,#a04800 41%,#a04800 56%,#472b1b 56%,#472b1b 61%,#c87870 61%,#c87870 66%,#484848 66%,#484848 68%,#808080 68%,#808080 75%,#98ff98 75%,#98ff98 77%,#5090d0 77%,#5090d0 92%,#b8b8b8 92%,#b8b8b8 94%,#000000 94%,#000000 97%,#ffffff 97%);
    174 }
    175 60% {
    176 background: #c87870;
    177 background-image: linear-gradient(to bottom, #ffffff 5%,#c87870 5%,#c87870 14%,#484848 14%,#484848 22%,#808080 22%,#808080 31%,#98ff98 31%,#98ff98 38%,#5090d0 38%,#5090d0 43%,#b8b8b8 43%,#b8b8b8 49%,#000000 49%,#000000 54%,#68d0a8 54%,#68d0a8 60%,#a838a0 60%,#a838a0 67%,#50b818 67%,#50b818 72%,#181090 72%,#181090 77%,#f0e858 77%,#f0e858 84%,#a04800 84%,#a04800 90%,#472b1b 90%,#472b1b 95%,#882000 95%);
    178 }
    179 80% {
    180 background: #68d0a8;
    181 background-image: linear-gradient(to bottom, #882000 5%,#68d0a8 5%,#68d0a8 14%,#a838a0 14%,#a838a0 22%,#50b818 22%,#50b818 31%,#181090 31%,#181090 38%,#f0e858 38%,#f0e858 43%,#a04800 43%,#a04800 49%,#472b1b 49%,#472b1b 54%,#c87870 54%,#c87870 60%,#484848 60%,#484848 67%,#808080 67%,#808080 72%,#98ff98 72%,#98ff98 77%,#5090d0 77%,#5090d0 84%,#b8b8b8 84%,#b8b8b8 90%,#000000 90%,#000000 95%,#ffffff 95%);
    182 }
    183 100% {
    184 background: #50b818;
    185 background-image: linear-gradient(to bottom, #ffffff 3%,#000000 3%,#000000 6%,#b8b8b8 6%,#b8b8b8 8%,#5090d0 8%,#5090d0 23%,#98ff98 23%,#98ff98 25%,#808080 25%,#808080 32%,#484848 32%,#484848 34%,#c87870 34%,#c87870 39%,#472b1b 39%,#472b1b 44%,#a04800 44%,#a04800 59%,#f0e858 59%,#f0e858 62%,#181090 62%,#181090 73%,#50b818 73%,#50b818 82%,#a838a0 82%,#a838a0 88%,#68d0a8 88%,#68d0a8 90%,#882000 90%);
    186 }
    187 }
    188 /**
    189 * All the typing stuff on the blue screen
    190 */
    191 .loading {
    192 line-height: 1;
    193 }
    194 .loading li {
    195 padding-right: 1em;
    196 width: 0;
    197 height: 0;
    198 overflow: hidden;
    199 display: inline-block;
    200 position: relative;
    201 float: left;
    202 clear: left;
    203 }
    204 .loading li:first-child {
    205 height: auto;
    206 width: auto;
    207 }
    208 .loading li:before {
    209 white-space: pre;
    210 }
    211 .spacebar:before,
    212 .loading li:first-child:before {
    213 content: "\0a **** commodore 64 basic v2 ****\
    214 \0a\0a 64k ram system 38911 basic bytes free\
    215 \0a\0aready.";
    216 }
    217 .loading li:nth-child(2):before {
    218 content: "load\"pixelambacht\",8,1";
    219 }
    220 .loading li:nth-child(3):before {
    221 content: "\0asearching for pixelambacht\0aloading";
    222 }
    223 .loading li:nth-child(4):before {
    224 content: "ready.";
    225 }
    226 .loading li:nth-child(5):before {
    227 content: "run";
    228 }
    229 .loading li:nth-child(2) {
    230 width: 1em;
    231 height: auto;
    232 text-indent: 1em;
    233 animation-name: line_one;
    234 animation-delay: 2s;
    235 animation-duration: 3s;
    236 animation-iteration-count: 1;
    237 animation-timing-function: steps(22);
    238 animation-fill-mode: forwards;
    239 }
    240 .loading li:nth-child(2):after {
    241 width: 1em;
    242 height: 1em;
    243 background: rgba(0,0,0,0);
    244 content: "";
    245 position: absolute;
    246 top: 0;
    247 right: 0;
    248 animation-name: cursor;
    249 animation-duration: 1s;
    250 animation-iteration-count: 7; /* must be even, so we end on invisible cursor */
    251 animation-timing-function: steps(1);
    252 animation-fill-mode: forwards;
    253 }
    254 .loading li:nth-child(3) {
    255 animation-delay: 7s;
    256 animation-duration: 1s;
    257 animation-name: line_two;
    258 animation-iteration-count: 1;
    259 animation-timing-function: steps(1, start);
    260 animation-fill-mode: forwards;
    261 }
    262 .loading li:nth-child(4) {
    263 animation-delay: 11s;
    264 animation-duration: 1s;
    265 animation-name: line_two;
    266 animation-iteration-count: 1;
    267 animation-timing-function: steps(1, start);
    268 animation-fill-mode: forwards;
    269 }
    270 .loading li:nth-child(5) {
    271 width: 1em;
    272 height: auto;
    273 text-indent: 1em;
    274 animation-delay: 12s;
    275 animation-duration: 1s;
    276 animation-name: line_three;
    277 animation-iteration-count: 1;
    278 animation-timing-function: steps(3, start);
    279 animation-fill-mode: forwards;
    280 }
    281 .loading li:nth-child(5):after {
    282 width: 1em;
    283 height: 1em;
    284 background: rgba(0,0,0,0);
    285 content: "";
    286 position: absolute;
    287 top: 0;
    288 right: 0;
    289 animation-name: cursor;
    290 animation-duration: 1s;
    291 animation-delay: 10.5s;
    292 animation-iteration-count: 3; /* must be even, so we end on invisible cursor */
    293 animation-timing-function: steps(1);
    294 animation-fill-mode: forwards;
    295 }
    296 /**
    297 * Decrunching
    298 */
    299 section.bluescreen:before {
    300 animation-name: decrunch;
    301 animation-delay: 15s;
    302 animation-duration: 0.25s;
    303 animation-iteration-count: 14;
    304 animation-timing-function: steps(1);
    305 }
    306 /**
    307 * Intro screen animations
    308 */
    309 @keyframes startintro {
    310 to {
    311 visibility: visible;
    312 }
    313 }
    314 @keyframes logoswing {
    315 50% {
    316 left: -162px;
    317 }
    318 }
    319 @keyframes rasterswing {
    320 50% {
    321 top: 168px;
    322 }
    323 }
    324 @keyframes rasterindex {
    325 50% {
    326 z-index: 10;
    327 }
    328 }
    329 @keyframes textflash {
    330 0% { color: #000000; }
    331 1% { color: #20398d; }
    332 2% { color: #6076c5; }
    333 3% { color: #86bec5; }
    334 4% { color: #ffffff; }
    335 5% { color: #86bec5; }
    336 6% { color: #6076c5; }
    337 7% { color: #20398d; }
    338 8% { color: #000000; }
    339 26% { color: #873b31; }
    340 27% { color: #ba7369; }
    341 28% { color: #dce78c; }
    342 29% { color: #ffffff; }
    343 30% { color: #dce78c; }
    344 31% { color: #ba7369; }
    345 32% { color: #873b31; }
    346 33% { color: #000000; }
    347 51% { color: #555555; }
    348 52% { color: #808080; }
    349 53% { color: #ababab; }
    350 54% { color: #ffffff; }
    351 55% { color: #ababab; }
    352 56% { color: #808080; }
    353 57% { color: #555555; }
    354 58% { color: #000000; }
    355 76% { color: #625000; }
    356 77% { color: #74ab54; }
    357 78% { color: #b7eb9b; }
    358 79% { color: #ffffff; }
    359 80% { color: #b7eb9b; }
    360 81% { color: #74ab54; }
    361 82% { color: #625000; }
    362 83% { color: #000000; }
    363 }
    364 @keyframes starscroll {
    365 to {
    366 left: -40em;
    367 }
    368 }
    369 @keyframes scroller {
    370 to {
    371 text-indent: -220em; /* Should match text length */
    372 }
    373 }
    374 @keyframes scrollerbounce {
    375 from, to {
    376 animation-timing-function: ease-out;
    377 }
    378 50% {
    379 line-height: 1em;
    380 animation-timing-function: ease-in;
    381 }
    382 }
    383 /**
    384 * The intro screem
    385 */
    386 section.introscreen {
    387 animation-name: startintro;
    388 animation-delay: 19s; /* Blue screen animation takes 19s */
    389 animation-fill-mode: forwards;
    390 animation-duration: 1s; /* Doesn't matter */
    391 visibility: hidden;
    392 background: #000;
    393 border-color: #000;
    394 font: normal 16px "Giana";
    395 text-transform: uppercase;
    396 }
    397 section.introscreen:before,
    398 section.introscreen:after {
    399 background: #000;
    400 }
    401 /**
    402 * The swinging Pixelambacht logo
    403 */
    404 div.logo {
    405 position: absolute;
    406 top: 64px;
    407 left: 0;
    408 right: 0;
    409 text-align: center;
    410 margin: 0 auto;
    411 height: 96px;
    412 color: #6076c5;
    413 overflow: hidden;
    414 }
    415 div.logo:before {
    416 content: url(pixelambacht-logo.png);
    417 position: absolute;
    418 left: 40px;
    419 animation-name: logoswing;
    420 animation-duration: 3s;
    421 animation-iteration-count: infinite;
    422 animation-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
    423 animation-fill-mode: forwards;
    424 z-index: 9;
    425 }
    426 /**
    427 * The swinging raster bar
    428 */
    429 section.introscreen:after {
    430 height: 100px;
    431 left: -64px;
    432 right: -64px;
    433 z-index: 8;
    434 position: absolute;
    435 animation-name: rasterswing, rasterindex;
    436 animation-duration: 4s, 4s;
    437 animation-iteration-count: infinite, infinite;
    438 animation-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000), steps(1);
    439 animation-fill-mode: forwards;
    440 background: linear-gradient(to bottom, #873b31 0%,#000000 2%,#873b31 2%,#873b31 4%,#873b31 4%,#873b31 6%,#ba7369 6%,#ba7369 8%,#873b31 8%,#873b31 10%,#ba7369 10%,#ba7369 12%,#ba7369 12%,#ba7369 14%,#dce78c 14%,#dce78c 16%,#ba7369 16%,#ba7369 18%,#dce78c 18%,#dce78c 20%,#dce78c 20%,#dce78c 22%,#ffffff 22%,#ffffff 24%,#dce78c 24%,#dce78c 26%,#ffffff 26%,#ffffff 28%,#ffffff 28%,#ffffff 30%,#dce78c 30%,#dce78c 32%,#ffffff 32%,#ffffff 34%,#dce78c 34%,#dce78c 36%,#dce78c 36%,#dce78c 38%,#ba7369 38%,#ba7369 40%,#dce78c 40%,#dce78c 42%,#ba7369 42%,#ba7369 44%,#ba7369 44%,#ba7369 46%,#873b31 46%,#873b31 48%,#ba7369 48%,#ba7369 50%,#873b31 50%,#873b31 52%,#873b31 52%,#873b31 54%,#000000 54%,#000000 56%,#873b31 56%,#873b31 58%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%);
    441 }
    442 /**
    443 * Credits block
    444 */
    445 ul.presents {
    446 z-index: 10;
    447 color: #000000;
    448 position: absolute;
    449 top: 228px;
    450 left: -64px;
    451 right: -64px;
    452 text-align: center;
    453 padding: 34px 0; /* Making it 100px high */
    454 background: linear-gradient(to bottom, #20398d 0%,#000000 2%,#20398d 2%,#20398d 4%,#20398d 4%,#20398d 6%,#6076c5 6%,#6076c5 8%,#20398d 8%,#20398d 10%,#6076c5 10%,#6076c5 12%,#6076c5 12%,#6076c5 14%,#86bec5 14%,#86bec5 16%,#6076c5 16%,#6076c5 18%,#86bec5 18%,#86bec5 20%,#86bec5 20%,#86bec5 22%,#ffffff 22%,#ffffff 24%,#86bec5 24%,#86bec5 26%,#ffffff 26%,#ffffff 74%,#86bec5 74%,#86bec5 76%,#ffffff 76%,#ffffff 78%,#86bec5 78%,#86bec5 80%,#86bec5 80%,#86bec5 82%,#6076c5 82%,#6076c5 84%,#86bec5 84%,#86bec5 86%,#6076c5 86%,#6076c5 88%,#6076c5 88%,#6076c5 90%,#20398d 90%,#20398d 92%,#6076c5 92%,#6076c5 94%,#20398d 94%,#20398d 96%,#20398d 96%,#20398d 98%,#000000 98%,#000000 100%); /* W3C */
    455 }
    456 ul.presents li:first-child:before {
    457 content: "c64 in css3";
    458 animation-name: textflash;
    459 animation-duration: 10s;
    460 animation-iteration-count: infinite;
    461 animation-timing-function: steps(1);
    462 }
    463 ul.presents li:last-child:before {
    464 content: "coded by pixelambacht";
    465 animation-name: textflash;
    466 animation-duration: 10s;
    467 animation-delay: 0.5s;
    468 animation-iteration-count: infinite;
    469 animation-timing-function: steps(1);
    470 }
    471 /**
    472 * Flashing startfield behind the scrolltext
    473 */
    474 .starfield {
    475 position: relative;
    476 position: absolute;
    477 bottom: 0;
    478 left: 0;
    479 overflow: hidden;
    480 height: 4em;
    481 width: 40em;
    482 }
    483 .starfield li {
    484 position: relative;
    485 display: inline;
    486 left: 0;
    487 }
    488 .starfield li:before {
    489 content: ".";
    490 }
    491 /* Create an exact copy of each star */
    492 .starfield li:after {
    493 content: ".";
    494 position: absolute;
    495 top: 0;
    496 left: 40em;
    497 }
    498 .starfield li {
    499 animation-name: starscroll;
    500 animation-duration: 5s;
    501 animation-timing-function: linear;
    502 animation-iteration-count: infinite;
    503 animation-fill-mode: forwards;
    504 }
    505 .starfield li:before,
    506 .starfield li:after {
    507 animation-name: textflash;
    508 animation-iteration-count: infinite;
    509 animation-timing-function: steps(1);
    510 animation-duration: 6.5s;
    511 padding-left: 3em;
    512 }
    513 .starfield li:nth-child(2n):before,
    514 .starfield li:nth-child(2n):after {
    515 padding-left: 4em;
    516 }
    517 .starfield li:nth-child(3n):before,
    518 .starfield li:nth-child(3n):after {
    519 padding-left: 7em;
    520 }
    521 .starfield li:nth-child(4n):before,
    522 .starfield li:nth-child(4n):after {
    523 padding-left: 2em;}
    524 /* Flash each star at a different time */
    525 .starfield li:nth-child(1):before,
    526 .starfield li:nth-child(1):after {
    527 animation-delay: -1s;
    528 }
    529 .starfield li:nth-child(2):before,
    530 .starfield li:nth-child(2):after {
    531 animation-delay: -1.5s;
    532 }
    533 .starfield li:nth-child(3):before,
    534 .starfield li:nth-child(3):after {
    535 animation-delay: -2s;
    536 }
    537 .starfield li:nth-child(4):before,
    538 .starfield li:nth-child(4):after {
    539 animation-delay: -2.5s;
    540 }
    541 .starfield li:nth-child(5):before,
    542 .starfield li:nth-child(5):after {
    543 animation-delay: -3s;
    544 }
    545 .starfield li:nth-child(6):before,
    546 .starfield li:nth-child(6):after {
    547 animation-delay: -3.5s;
    548 }
    549 .starfield li:nth-child(7):before,
    550 .starfield li:nth-child(7):after {
    551 animation-delay: -4s;
    552 }
    553 .starfield li:nth-child(8):before,
    554 .starfield li:nth-child(8):after {
    555 animation-delay: -4.5s;
    556 }
    557 .starfield li:nth-child(9):before,
    558 .starfield li:nth-child(9):after {
    559 animation-delay: -5s;
    560 }
    561 .starfield li:nth-child(10):before,
    562 .starfield li:nth-child(10):after {
    563 animation-delay: -5.5s;
    564 }
    565 .starfield li:nth-child(11):before,
    566 .starfield li:nth-child(11):after {
    567 animation-delay: -6s;
    568 }
    569 .starfield li:nth-child(12):before,
    570 .starfield li:nth-child(12):after {
    571 animation-delay: -6.5s;
    572 }
    573 .starfield li:nth-child(13):before,
    574 .starfield li:nth-child(13):after {
    575 animation-delay: -7s;
    576 }
    577 .starfield li:nth-child(14):before,
    578 .starfield li:nth-child(14):after {
    579 animation-delay: -7.5s;
    580 }
    581 .starfield li:nth-child(15):before,
    582 .starfield li:nth-child(15):after {
    583 animation-delay: -8s;
    584 }
    585 .starfield li:nth-child(16):before,
    586 .starfield li:nth-child(16):after {
    587 animation-delay: -8.5s;
    588 }
    589 .starfield li:nth-child(17):before,
    590 .starfield li:nth-child(17):after {
    591 animation-delay: -9s;
    592 }
    593 .starfield li:nth-child(18):before,
    594 .starfield li:nth-child(18):after {
    595 animation-delay: -9.5s;
    596 }
    597 .starfield li:nth-child(19):before,
    598 .starfield li:nth-child(19):after {
    599 animation-delay: -10s;
    600 }
    601 .starfield li:nth-child(20):before,
    602 .starfield li:nth-child(20):after {
    603 animation-delay: -10.5s;
    604 }
    605 .starfield li:nth-child(21):before,
    606 .starfield li:nth-child(21):after {
    607 animation-delay: -11s;
    608 }
    609 /**
    610 * And finally the meat of a C64 cracktro... the scrolltext
    611 */
    612 p.scrolltext {
    613 /* Bounce-animation needs to be separate from the scroll animation, otherwise the
    614 change in timing-functions will be applied to both animations */
    615 line-height: 7em;
    616 animation-name: scrollerbounce;
    617 animation-delay: 20s; /* Blue screen animation takes 19s, wait another second */
    618 animation-duration: 1s;
    619 animation-iteration-count: infinite;
    620 }
    621 p.scrolltext:before {
    622 content: "welcome to my little c64 intro entirely done in css! no javascript was used \
    623 for these effects... greetz to all the elite! press space to reset, and have fun \
    624 typing some basic! pixelambacht signing off...";
    625 position: absolute;
    626 bottom: 0;
    627 left: 0;
    628 width: 40em;
    629 overflow: hidden;
    630 white-space: nowrap;
    631 text-indent: 40em;
    632 height: 60px;
    633 color: #fff;
    634 animation-name: scroller;
    635 animation-delay: 20s; /* Blue screen animation takes 19s, wait another second */
    636 animation-duration: 16s;
    637 animation-iteration-count: infinite;
    638 animation-timing-function: linear;
    639 }
    640 /**
    641 * Act like a real C64 once space bar has been pressed
    642 */
    643 .spacebar:valid + section li + li {
    644 display: none;
    645 }
    646 .spacebar:valid + section,
    647 .spacebar:valid + section:before,
    648 .spacebar:valid + section + section {
    649 animation-name: none;
    650 }
    651 .spacebar:valid + section + section {
    652 /* This selector doesn't work in Chrome, although it's valid :( */
    653 visibility: hidden;
    654 }
    655 .spacebar {
    656 background: transparent;
    657 outline: none;
    658 padding: 0;
    659 border: none;
    660 resize: none;
    661 }
    662 .spacebar:valid {
    663 z-index: 20;
    664 margin-top: -104px;
    665 text-indent: -1em; /* Hide that first space */
    666 height: 19em;
    667 overflow: hidden;
    668 }
The opensource script and files are on the original website

ive also added them in the attachment of this post enjoy :D
Dateianhänge
c64css3-master.zip
(45.34 KiB) 154-mal heruntergeladen