Pure Css Game
Ein CSS Schreib spiel. Versuche innerhalb 10 Sekunden alle Wörter zu schreiben. Das Spiel wurde nur mit CSS erstellt
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>