Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Pure Css Game

Pure Css Game

Ein CSS Schreib spiel. Versuche innerhalb 10 Sekunden alle Wörter zu schreiben. Das Spiel wurde nur mit CSS erstellt

Der hier verwendete Code

<style> @charset "UTF-8"; html { background-color: #000; } body { font-family: "Audiowide", cursive; margin: 0; padding: 0; color: #fff; } strong { color: tomato; } .m-canvas { position: relative; padding: 20px; text-align: center; } .m-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; z-index: 10; pointer-events: none; } .m-initialScene { position: absolute; top: 20px; width: 100%; background-color: #000; } .m-initialScene-heading { margin: 0 0 20px 0; padding: 0; font-size: 40px; } .m-initialScene-text { margin: 0 0 20px 0; padding: 0; font-size: 20px; } .m-progress { position: absolute; top: 0; left: 0; width: 100%; } .m-progress-bar { width: 100%; height: 3px; background-color: #fff; } [class^="q"] { margin-top: 100px; font-size: 30px; font-weight: bold; font-family: "Audiowide", cursive; width: 100%; text-align: center; background-color: #000; color: lime; border: none; border-bottom: 3px dashed #ccc; } [class^="q"]:focus { box-shadow: none; text-shadow: none; outline: none; border-color: lime; } .m-title { position: absolute; top: 20px; left: 0; width: 100%; font-size: 20px; user-select: none; } [class*="m-title-item"] strong { font-size: 25px; } .m-caution { color: #555; font-size: 20px; } .m-finalScene { position: absolute; top: 20px; left: 0; width: 100%; height: 100%; background-color: #000; } .m-finalScene-heading { margin: 0 0 20px 0; padding: 0; font-size: 40px; } .m-finalScene-text { margin: 0 0 20px 0; padding: 0; font-size: 20px; } .m-button { box-sizing: border-box; display: inline-block; margin: 0; padding: 10px; border: 3px solid #fff; border-radius: 10px; font-size: 18px; transition: 0.5s all ease-out; color: #fff; text-decoration: none; cursor: pointer; } .m-button:hover { color: lime; transition-duration: 0.2s; } .m-button:active { color: tomato; } .hidden { display: none; } #flag_initialScene:not(:checked)~.m-initialScene { display: block; } #flag_initialScene:not(:checked)~.m-progress, #flag_initialScene:not(:checked)~.q1, #flag_initialScene:not(:checked)~.m-title { display: none; } #flag_initialScene:checked~.m-initialScene { pointer-events: none; } #flag_initialScene:checked~.m-progress, #flag_initialScene:checked~.q1, #flag_initialScene:checked~.m-title { display: block; } #flag_initialScene:checked~.q1 { display: inline-block; } #flag_initialScene:checked~.m-progress>.m-progress-bar { animation: m-progress-bar 10s linear; animation-fill-mode: forwards; } #flag_initialScene:checked~.m-initialScene { animation: 0.5s m-initialScene ease; animation-fill-mode: forwards; } #flag_initialScene:checked~.m-finalScene { animation: 0.5s m-finalScene ease; animation-delay: 10s; animation-fill-mode: forwards; } input[pattern]:valid { position: absolute; top: 0; left: -9999px; display: none; } input[pattern]:valid+input[pattern]:invalid { display: inline-block; } .m-title>div { display: none; } .q1:invalid~.q2:invalid~.q3:invalid~.m-title>.m-title-item1 { display: block; } .q1:valid~.q2:invalid~.q3:invalid~.m-title>.m-title-item2 { display: block; } .q1:valid~.q2:valid~.q3:invalid~.m-title>.m-title-item3 { display: block; } .q3:valid~.m-progress { display: none !important; } .q3:valid~.m-finalScene { animation-delay: 0s !important; } .q3:valid~.m-title { display: none; } .q1:invalid~.q2:invalid~.q3:invalid~.m-finalScene .m-finalScene-result:before { content: "Oops!"; } .q1:valid~.q2:invalid~.q3:invalid~.m-finalScene .m-finalScene-result:before { content: "You completed 1st stage!"; } .q1:valid~.q2:valid~.q3:invalid~.m-finalScene .m-finalScene-result:before { content: "You completed 2nd stage!"; } .q3:valid~.m-finalScene .m-finalScene-result:before { color: gold; content: "Congratulations!"; } .m-overlay { animation: 0.5s m-overlay ease; animation-fill-mode: forwards; transform: translateX(0); opacity: 1; } @-webkit-keyframes -m-overlay { 99% { -webkit-transform: translateX(0); opacity: 0; } 100% { -webkit-transform: translateX(-100%); opacity: 0; } } @keyframes m-overlay { 99% { transform: translateX(0); opacity: 0; } 100% { transform: translateX(-100%); opacity: 0; } } /** * プログレスバー */ @-webkit-keyframes -m-progress-bar { 50% { background-color: tomato; } 100% { width: 0%; background-color: red; } } @keyframes m-progress-bar { 50% { background-color: tomato; } 100% { width: 0%; background-color: red; } } .m-initialScene { transform: translateX(0); opacity: 1; } @-webkit-keyframes -m-initialScene { 1% { opacity: 1; -webkit-transform: translateX(0); } 99% { opacity: 0; -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); opacity: 0; } } @keyframes m-initialScene { 1% { opacity: 1; transform: translateX(0); } 99% { opacity: 0; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(-100%); } } .m-finalScene { transform: translateX(-100%); opacity: 0; } @-webkit-keyframes -m-finalScene { 1% { -webkit-transform: translateX(0); opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @keyframes m-finalScene { 1% { transform: translateX(0); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } </style> <div class="m-overlay"></div> <div class="m-canvas"> <input id="flag_initialScene" class="hidden" type="radio"> <input class="q1 hidden" type="text" pattern="Apple" required autofocus> <input class="q2 hidden" type="text" pattern="CSS Programmer" required autofocus> <input class="q3 hidden" type="text" pattern="The quick brown fox jumps over the lazy dog" required autofocus> <div class="m-progress"> <div class="m-progress-bar"></div> </div> <div class="m-title"> <div class="m-title-item1"> 1st stage<br> Enter <strong>Apple</strong> </div> <div class="m-title-item2"> 2nd stage<br> Enter <strong>CSS Programmer</strong> </div> <div class="m-title-item3"> Final stage<br> Enter <strong>The quick brown fox jumps over the lazy dog</strong> </div> </div> <div class="m-caution">↑ Please focus textarea ↑</div> <div class="m-initialScene"> <h2 class="m-initialScene-heading">NoJS Typing Game</h2> <div class="m-initialScene-text"> <strong>Zeitlimit: 10 Sekunden</strong><br> Geben Sie Wörter in das Textfeld ein.<br> </div> <label class="m-button" for="flag_initialScene">Neues Spiel</label> </div> <div class="m-finalScene"> <h2 class="m-finalScene-heading">GAME OVER</h2> <div class="m-finalScene-text"> <span class="m-finalScene-result"></span> </div> <a class="m-button" href="https://basti1012.bplaced.net/index.php?ordner=codepen&id=804">Nochmal Spielen ?</a> </div> </div>