Tic-Tac-Toe-Spiel in reinem CSS3 implementiert
|
Wirkung der Operation:
html
<div Klasse="Tic Tac Toe">
<input class="player-1 left first-column top first-row first-diagonal turn-1" id="block1-1-1" type="radio"/>
<label class="turn-1" für="block1-1-1"></label>
<input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-1" id="Block1-1-2" type="Radio"/>
<label class="turn-1" für="block1-1-2"></label>
<input class="player-1 right third-column top first-row second-diagonal turn-1" id="block1-1-3" type="radio"/>
<label class="turn-1" für="block1-1-3"></label>
<input class="Spieler-1 links erste Spalte Mitte zweite Reihe Zug-1" id="block1-2-1" type="radio"/>
<label class="turn-1" für="block1-2-1"></label>
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-1" id="block1-2-2" type="radio"/>
<label class="turn-1" für="block1-2-2"></label>
<input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-1" id="block1-2-3" type="radio"/>
<label class="turn-1" für="block1-2-3"></label>
<input class="player-1 left erste Spalte unten dritte Reihe zweite Diagonale turn-1" id="block1-3-1" type="radio"/>
<label class="turn-1" für="block1-3-1"></label>
<input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-1" id="block1-3-2" type="radio"/>
<label class="turn-1" für="block1-3-2"></label>
<input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-1" id="Block1-3-3" type="Radio"/>
<label class="turn-1" für="block1-3-3"></label>
<input class="Spieler 2 links erste Spalte oben erste Reihe erste Diagonale Zug 2" id="block2-1-1" type="radio"/>
<label class="turn-2" für="block2-1-1"></label>
<input class="Spieler 2 Mitte zweite Spalte oben erste Reihe Zug 2" id="block2-1-2" type="radio"/>
<label class="turn-2" für="block2-1-2"></label>
<input class="Spieler 2 rechts dritte Spalte oben erste Reihe zweite Diagonale Zug 2" id="Block2-1-3" type="Radio"/>
<label class="turn-2" für="block2-1-3"></label>
<input class="Spieler 2 links erste Spalte Mitte zweite Reihe Zug 2" id="block2-2-1" type="radio"/>
<label class="turn-2" für="block2-2-1"></label>
<input class="Spieler-2 Mitte zweite Spalte Mitte zweite Reihe erste Diagonale zweite Diagonale Zug-2" id="Block2-2-2" type="Radio"/>
<label class="turn-2" für="block2-2-2"></label>
<input class="Spieler 2, rechts, dritte Spalte, Mitte, zweite Reihe, Zug 2" id="block2-2-3" type="radio"/>
<label class="turn-2" für="block2-2-3"></label>
<input class="player-2 left first-column bottom third-row second-diagonal turn-2" id="block2-3-1" type="radio"/>
<label class="turn-2" für="block2-3-1"></label>
<input class="Spieler-2 Mitte zweite Spalte unten dritte Reihe Zug-2" id="block2-3-2" type="radio"/>
<label class="turn-2" für="block2-3-2"></label>
<input class="Spieler 2", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug 2" id="Block2-3-3" type="Radio"/>
<label class="turn-2" für="block2-3-3"></label>
<input class="player-1 left first-column top first-row first-diagonal turn-3" id="block3-1-1" type="radio"/>
<label class="turn-3" für="block3-1-1"></label>
<input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-3" id="block3-1-2" type="radio"/>
<label class="turn-3" für="block3-1-2"></label>
<input class="player-1 right third-column top first-row second-diagonal turn-3" id="block3-1-3" type="radio"/>
<label class="turn-3" für="block3-1-3"></label>
<input class="Spieler-1 links erste Spalte Mitte zweite Reihe Zug-3" id="block3-2-1" type="radio"/>
<label class="turn-3" für="block3-2-1"></label>
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-3" id="block3-2-2" type="radio"/>
<label class="turn-3" für="block3-2-2"></label>
<input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-3" id="block3-2-3" type="radio"/>
<label class="turn-3" für="block3-2-3"></label>
<input class="player-1 left first-column bottom third-row second-diagonal turn-3" id="block3-3-1" type="radio"/>
<label class="turn-3" für="block3-3-1"></label>
<input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-3" id="block3-3-2" type="radio"/>
<label class="turn-3" für="block3-3-2"></label>
<input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-3" id="block3-3-3" type="radio"/>
<label class="turn-3" für="block3-3-3"></label>
<input class="Spieler 2 links erste Spalte oben erste Reihe erste Diagonale Zug 4" id="block4-1-1" type="radio"/>
<label class="turn-4" für="block4-1-1"></label>
<input class="Spieler 2 Mitte zweite Spalte oben erste Reihe Zug 4" id="block4-1-2" type="radio"/>
<label class="turn-4" für="block4-1-2"></label>
<input class="Spieler 2 rechts dritte Spalte oben erste Reihe zweite Diagonale Zug 4" id="block4-1-3" type="radio"/>
<label class="turn-4" für="block4-1-3"></label>
<input class="Spieler 2 links erste Spalte Mitte zweite Reihe Zug 4" id="block4-2-1" type="radio"/>
<label class="turn-4" für="block4-2-1"></label>
<input class="Spieler 2 Mitte zweite Spalte Mitte zweite Reihe erste Diagonale zweite Diagonale Zug 4" id="block4-2-2" type="radio"/>
<label class="turn-4" für="block4-2-2"></label>
<input class="Spieler 2, rechts, dritte Spalte, Mitte, zweite Reihe, Zug 4" id="block4-2-3" type="radio"/>
<label class="turn-4" für="block4-2-3"></label>
<input class="player-2 left first-column bottom third-row second-diagonal turn-4" id="block4-3-1" type="radio"/>
<label class="turn-4" für="block4-3-1"></label>
<input class="Spieler 2 Mitte zweite Spalte unten dritte Reihe Zug 4" id="block4-3-2" type="radio"/>
<label class="turn-4" für="block4-3-2"></label>
<input class="Spieler 2", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug 4" id="block4-3-3" type="radio"/>
<label class="turn-4" für="block4-3-3"></label>
<input class="player-1 left first-column top first-row first-diagonal turn-5" id="block5-1-1" type="radio"/>
<label class="turn-5" für="block5-1-1"></label>
<input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-5" id="block5-1-2" type="radio"/>
<label class="turn-5" für="block5-1-2"></label>
<input class="player-1 right third-column top first-row second-diagonal turn-5" id="block5-1-3" type="radio"/>
<label class="turn-5" für="block5-1-3"></label>
<input class="Spieler-1 links erste Spalte Mitte zweite Reihe Zug-5" id="block5-2-1" type="radio"/>
<label class="turn-5" für="block5-2-1"></label>
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-5" id="block5-2-2" type="radio"/>
<label class="turn-5" für="block5-2-2"></label>
<input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-5" id="block5-2-3" type="radio"/>
<label class="turn-5" für="block5-2-3"></label>
<input class="player-1 left first-column bottom third-row second-diagonal turn-5" id="block5-3-1" type="radio"/>
<label class="turn-5" für="block5-3-1"></label>
<input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-5" id="block5-3-2" type="radio"/>
<label class="turn-5" für="block5-3-2"></label>
<input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-5" id="block5-3-3" type="radio"/>
<label class="turn-5" für="block5-3-3"></label>
<input class="Spieler 2 links erste Spalte oben erste Reihe erste Diagonale Zug 6" id="block6-1-1" type="radio"/>
<label class="turn-6" für="block6-1-1"></label>
<input class="Spieler 2 Mitte zweite Spalte oben erste Reihe Zug 6" id="block6-1-2" type="radio"/>
<label class="turn-6" für="block6-1-2"></label>
<input class="Spieler 2 rechts dritte Spalte oben erste Reihe zweite Diagonale Zug 6" id="block6-1-3" type="radio"/>
<label class="turn-6" für="block6-1-3"></label>
<input class="Spieler 2 links erste Spalte Mitte zweite Reihe Zug 6" id="block6-2-1" type="radio"/>
<label class="turn-6" für="block6-2-1"></label>
<input class="Spieler 2 Mitte zweite Spalte Mitte zweite Reihe erste Diagonale zweite Diagonale Zug 6" id="block6-2-2" type="radio"/>
<label class="turn-6" für="block6-2-2"></label>
<input class="Spieler 2, rechts, dritte Spalte, Mitte, zweite Reihe, Zug 6" id="block6-2-3" type="radio"/>
<label class="turn-6" für="block6-2-3"></label>
<input class="player-2 left first-column bottom third-row second-diagonal turn-6" id="block6-3-1" type="radio"/>
<label class="turn-6" für="block6-3-1"></label>
<input class="Spieler 2 Mitte zweite Spalte unten dritte Reihe Zug 6" id="block6-3-2" type="radio"/>
<label class="turn-6" für="block6-3-2"></label>
<input class="Spieler 2", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug 6" id="block6-3-3" type="radio"/>
<label class="turn-6" für="block6-3-3"></label>
<input class="player-1 left first-column top first-row first-diagonal turn-7" id="block7-1-1" type="radio"/>
<label class="turn-7" für="block7-1-1"></label>
<input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-7" id="block7-1-2" type="radio"/>
<label class="turn-7" für="block7-1-2"></label>
<input class="player-1 right third-column top first-row second-diagonal turn-7" id="block7-1-3" type="radio"/>
<label class="turn-7" für="block7-1-3"></label>
<input class="Spieler-1 links erste Spalte Mitte zweite Reihe Zug-7" id="block7-2-1" type="radio"/>
<label class="turn-7" für="block7-2-1"></label>
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-7" id="block7-2-2" type="radio"/>
<label class="turn-7" für="block7-2-2"></label>
<input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-7" id="block7-2-3" type="radio"/>
<label class="turn-7" für="block7-2-3"></label>
<input class="player-1 left first-column bottom third-row second-diagonal turn-7" id="block7-3-1" type="radio"/>
<label class="turn-7" für="block7-3-1"></label>
<input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-7" id="block7-3-2" type="radio"/>
<label class="turn-7" für="block7-3-2"></label>
<input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-7" id="block7-3-3" type="radio"/>
<label class="turn-7" für="block7-3-3"></label>
<input class="Spieler 2 links erste Spalte oben erste Reihe erste Diagonale Zug 8" id="block8-1-1" type="radio"/>
<label class="turn-8" für="block8-1-1"></label>
<input class="Spieler 2 Mitte zweite Spalte oben erste Reihe Zug 8" id="block8-1-2" type="radio"/>
<label class="turn-8" für="block8-1-2"></label>
<input class="Spieler 2 rechts dritte Spalte oben erste Reihe zweite Diagonale Turn-8" id="Block8-1-3" type="Radio"/>
<label class="turn-8" für="block8-1-3"></label>
<input class="Spieler 2 links erste Spalte Mitte zweite Reihe Zug 8" id="block8-2-1" type="radio"/>
<label class="turn-8" für="block8-2-1"></label>
<input class="Spieler 2 Mitte zweite Spalte Mitte zweite Reihe erste Diagonale zweite Diagonale Zug 8" id="block8-2-2" type="radio"/>
<label class="turn-8" für="block8-2-2"></label>
<input class="Spieler 2, rechts, dritte Spalte, Mitte, zweite Reihe, Zug 8" id="block8-2-3" type="radio"/>
<label class="turn-8" für="block8-2-3"></label>
<input class="player-2 left first-column bottom third-row second-diagonal turn-8" id="block8-3-1" type="radio"/>
<label class="turn-8" für="block8-3-1"></label>
<input class="Spieler 2 Mitte zweite Spalte unten dritte Reihe Zug 8" id="block8-3-2" type="radio"/>
<label class="turn-8" für="block8-3-2"></label>
<input class="Spieler 2", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug 8" id="block8-3-3" type="radio"/>
<label class="turn-8" für="block8-3-3"></label>
<input class="player-1 left first-column top first-row first-diagonal turn-9" id="block9-1-1" type="radio"/>
<label class="turn-9" für="block9-1-1"></label>
<input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-9" id="block9-1-2" type="radio"/>
<label class="turn-9" für="block9-1-2"></label>
<input class="player-1 right third-column top first-row second-diagonal turn-9" id="block9-1-3" type="radio"/>
<label class="turn-9" für="block9-1-3"></label>
<input class="player-1 left first-column center second-row turn-9" id="block9-2-1" type="radio"/>
<label class="turn-9" für="block9-2-1"></label>
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-9" id="block9-2-2" type="radio"/>
<label class="turn-9" für="block9-2-2"></label>
<input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-9" id="block9-2-3" type="radio"/>
<label class="turn-9" für="block9-2-3"></label>
<input class="player-1 left first-column bottom third-row second-diagonal turn-9" id="block9-3-1" type="radio"/>
<label class="turn-9" für="block9-3-1"></label>
<input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-9" id="block9-3-2" type="radio"/>
<label class="turn-9" für="block9-3-2"></label>
<input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-9" id="block9-3-3" type="radio"/>
<label class="turn-9" für="block9-3-3"></label>
<div Klasse="Ende">
<h3></h3><a href="">Neustart</a>
</div>
</div>
<h5>Hinweis: Verwenden Sie für das beste Erlebnis die Vollseitenansicht.</h5>CSS3
@Zeichensatz "UTF-8";
/* Variablen
--------------------------------------------------------------- */
/* Textkörper- und Hinweisstil
--------------------------------------------------------------- */
Körper {
Farbe: #b6b5ca;
Schriftfamilie: „Arial“, serifenlos;
Rand: 0;
Textausrichtung: zentriert;
}
h5 {
Schriftstärke: 400;
Polsterung: 0 20px;
}
/* Tic-Tac-Toe-Spiel
--------------------------------------------------------------- */
.tic-tac-toe {
Schriftfamilie: „Open Sans“, serifenlos;
Höhe: 300px;
Überlauf: versteckt;
Rand: 50px automatisch 30px automatisch;
Position: relativ;
Breite: 300px;
}
@media (Mindestbreite: 450px) {
.tic-tac-toe {
Höhe: 450px;
Breite: 450px;
}
}
.tic-tac-toe Eingabe [Typ = "Radio"] {
Anzeige: keine;
}
.tic-tac-toe Eingabe [Typ = "Radio"]: aktiviert + Bezeichnung {
Cursor: Standard;
z-Index: 10 !wichtig;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Spieler-1 + Bezeichnung: nach {
Inhalt: "";
}
.tic-tac-toe Eingabe [Typ = "Radio"].Spieler-2 + Bezeichnung: nach {
Inhalt: "";
}
.tic-tac-toe input[type="radio"].player-1:aktiviert + label:nach, .tic-tac-toe input[type="radio"].player-2:aktiviert + label:nach {
Deckkraft: 1;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Spieler-1:aktiviert + Bezeichnung {
Hintergrundfarbe: #dc685a;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Spieler-2:aktiviert + Bezeichnung {
Hintergrundfarbe: #ecaf4f;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-1 + Bezeichnung {
Z-Index: 1;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-2 + Bezeichnung {
Z-Index: 2;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-3 + Bezeichnung {
Z-Index: 3;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-4 + Bezeichnung {
Z-Index: 4;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-5 + Bezeichnung {
Z-Index: 5;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-6 + Bezeichnung {
Z-Index: 6;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-7 + Bezeichnung {
Z-Index: 7;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-8 + Bezeichnung {
Z-Index: 8;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-9 + Bezeichnung {
Z-Index: 9;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-1 + Bezeichnung {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-1: geprüft ~ .Turn-2 + Label {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-2: geprüft ~ .Turn-3 + Label {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-3: geprüft ~ .Turn-4 + Label {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-4: geprüft ~ .Turn-5 + Label {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-5: geprüft ~ .turn-6 + Bezeichnung {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-6: geprüft ~ .Turn-7 + Label {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-7: geprüft ~ .Turn-8 + Label {
Anzeige: Block;
}
.tic-tac-toe Eingabe[Typ="Radio"].turn-8:geprüft ~ .turn-9 + Label {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].links + Bezeichnung {
links: 0;
}
.tic-tac-toe Eingabe [Typ = "Radio"].top + Bezeichnung {
oben: 0;
}
.tic-tac-toe Eingabe [Typ = "Radio"]. Mitte + Bezeichnung {
links: 100px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].rechts + Bezeichnung {
links: 200px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].center + Bezeichnung {
oben: 100px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].bottom + Bezeichnung {
oben: 200px;
}
@media (Mindestbreite: 450px) {
.tic-tac-toe Eingabe [Typ = "Radio"]. Mitte + Bezeichnung {
links: 150px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].rechts + Bezeichnung {
links: 300px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].center + Bezeichnung {
oben: 150px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].bottom + Bezeichnung {
oben: 300px;
}
}
.tic-tac-toe Eingabe [Typ = "Radio"]: aktiviert ~ Eingabe [Typ = "Radio"]: aktiviert ~ Eingabe [Typ = "Radio"]: aktiviert ~
Eingabe[Typ="Radio"]:aktiviert ~ Eingabe[Typ="Radio"]:aktiviert ~ Eingabe[Typ="Radio"]:aktiviert ~
input[type="radio"]:aktiviert ~ input[type="radio"]:aktiviert ~ input[type="radio"]:aktiviert ~ .ende {
Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"]: aktiviert ~ Eingabe [Typ = "Radio"]: aktiviert ~ Eingabe [Typ = "Radio"]: aktiviert ~
Eingabe[Typ="Radio"]:aktiviert ~ Eingabe[Typ="Radio"]:aktiviert ~ Eingabe[Typ="Radio"]:aktiviert ~
input[type="radio"]:aktiviert ~ input[type="radio"]:aktiviert ~ input[type="radio"]:aktiviert ~ .end > h3:vor {
Inhalt: „Es ist unentschieden!“;
}
.tic-tac-toe .player-1.erste-spalte:aktiviert ~ .player-1.erste-spalte:aktiviert ~ .player-1.erste-spalte:aktiviert ~ .ende,
.tic-tac-toe .player-1.zweite-spalte:aktiviert ~ .player-1.zweite-spalte:aktiviert ~ .player-1.zweite-spalte:aktiviert ~ .ende,
.tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .ende,
.tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .ende,
.tic-tac-toe .player-1.second-row:aktiviert ~ .player-1.second-row:aktiviert ~ .player-1.second-row:aktiviert ~ .ende,
.tic-tac-toe .player-1.third-row:aktiviert ~ .player-1.third-row:aktiviert ~ .player-1.third-row:aktiviert ~ .ende,
.tic-tac-toe .player-1.first-diagonal:geprüft ~ .player-1.first-diagonal:geprüft ~ .player-1.first-diagonal:geprüft ~ .ende,
.tic-tac-toe .player-1.second-diagonal:geprüft ~ .player-1.second-diagonal:geprüft ~ .player-1.second-diagonal:geprüft ~ .end {
Anzeige: Block;
}
.tic-tac-toe .player-1.first-column:aktiviert ~ .player-1.first-column:aktiviert ~ .player-1.first-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.second-column:aktiviert ~ .player-1.second-column:aktiviert ~ .player-1.second-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.third-column:aktiviert ~ .player-1.third-column:aktiviert ~ .player-1.third-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.first-row:aktiviert ~ .player-1.first-row:aktiviert ~ .player-1.first-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.second-row:aktiviert ~ .player-1.second-row:aktiviert ~ .player-1.second-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.third-row:aktiviert ~ .player-1.third-row:aktiviert ~ .player-1.third-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.first-diagonal:geprüft ~ .player-1.first-diagonal:geprüft ~ .player-1.first-diagonal:geprüft ~ .end h3:vorher,
.tic-tac-toe .player-1.second-diagonal:geprüft ~ .player-1.second-diagonal:geprüft ~ .player-1.second-diagonal:geprüft ~ .end h3:vor {
Inhalt: „Spieler 1 gewinnt!“ !important;
}
.tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .ende,
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .ende,
.tic-tac-toe .Spieler-2.dritte-Spalte:aktiviert ~ .Spieler-2.dritte-Spalte:aktiviert ~ .Spieler-2.dritte-Spalte:aktiviert ~ .Ende,
.tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .ende,
.tic-tac-toe .player-2.second-row:aktiviert ~ .player-2.second-row:aktiviert ~ .player-2.second-row:aktiviert ~ .ende,
.tic-tac-toe .player-2.third-row:aktiviert ~ .player-2.third-row:aktiviert ~ .player-2.third-row:aktiviert ~ .ende,
.tic-tac-toe .player-2.first-diagonal:geprüft ~ .player-2.first-diagonal:geprüft ~ .player-2.first-diagonal:geprüft ~ .ende,
.tic-tac-toe .player-2.second-diagonal:geprüft ~ .player-2.second-diagonal:geprüft ~ .player-2.second-diagonal:geprüft ~ .end {
Anzeige: Block;
}
.tic-tac-toe .player-2.first-column:aktiviert ~ .player-2.first-column:aktiviert ~ .player-2.first-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end h3:before,
.tic-tac-toe .player-2.third-column:aktiviert ~ .player-2.third-column:aktiviert ~ .player-2.third-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.first-row:aktiviert ~ .player-2.first-row:aktiviert ~ .player-2.first-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.second-row:aktiviert ~ .player-2.second-row:aktiviert ~ .player-2.second-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.third-row:aktiviert ~ .player-2.third-row:aktiviert ~ .player-2.third-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.first-diagonal:geprüft ~ .player-2.first-diagonal:geprüft ~ .player-2.first-diagonal:geprüft ~ .end h3:vorher,
.tic-tac-toe .player-2.second-diagonal:geprüft ~ .player-2.second-diagonal:geprüft ~ .player-2.second-diagonal:geprüft ~ .end h3:vor {
Inhalt: „Spieler 2 gewinnt!“ !important;
}
.tic-tac-toe-Etikett {
Hintergrundfarbe: #78bec5;
Rahmenradius: 14px;
Cursor: Zeiger;
Farbe: #fff;
Anzeige: keine;
Höhe: 90px;
Rand: 5px;
Position: absolut;
Breite: 90px;
-moz-transition: Hintergrundfarbe 0,3 s;
-o-Übergang: Hintergrundfarbe 0,3 s;
-webkit-transition: Hintergrundfarbe 0,3 s;
Übergang: Hintergrundfarbe 0,3 s;
}
@media (Mindestbreite: 450px) {
.tic-tac-toe-Etikett {
Höhe: 140px;
Breite: 140px;
}
}
.tic-tac-toe Bezeichnung:schweben {
Hintergrundfarbe: #3d4250;
}
.tic-tac-toe Beschriftung:Hover:nach {
Deckkraft: .4;
}
.tic-tac-toe label:nach {
links: 0;
Schriftfamilie: „FontAwesome“;
Schriftgröße: 45px;
Rand oben: -22,5px;
Deckkraft: 0;
Position: absolut;
Textausrichtung: zentriert;
Textschatten: 2px 2px 4px rgba(0, 0, 0, 0,2);
oben: 50 %;
Breite: 100 %;
}
@media (Mindestbreite: 450px) {
.tic-tac-toe label:nach {
Schriftgröße: 70px;
Rand oben: -35px;
}
}
.tic-tac-toe .ende {
Hintergrund: rgba(255, 255, 255, 0,8);
unten: 5px;
Farbe: #3d4250;
Anzeige: keine;
links: 5px;
Polsterung oben: 55px;
Position: absolut;
rechts: 5px;
oben: 5px;
Textausrichtung: zentriert;
Z-Index: 11;
}
@media (Mindestbreite: 450px) {
.tic-tac-toe .ende {
Polsterung oben: 110px;
}
}
.Tic Tac Toe .Ende h3 {
Schriftgröße: 30px;
Schriftstärke: 300;
}
@media (Mindestbreite: 450px) {
.Tic Tac Toe .Ende h3 {
Schriftgröße: 40px;
}
}
.Tic Tac Toe .Ende a {
Hintergrundfarbe: #3d4250;
Rahmenradius: 4px;
Farbe: #fff;
Polsterung: 14px 45px;
Textdekoration: keine;
-moz-transition: Hintergrundfarbe 0,2 s;
-o-transition: Hintergrundfarbe 0,2 s;
-webkit-transition: Hintergrundfarbe 0,2 s;
Übergang: Hintergrundfarbe 0,2 s;
}
.tic-tac-toe .ende a:hover {
Hintergrundfarbe: #262934;
Cursor: Zeiger;Oben sind die Details des Tic-Tac-Toe-Spiels aufgeführt, das in reinem CSS3 implementiert wurde. Weitere Informationen zum CSS3-Tic-Tac-Toe-Spiel finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils
>>: Tutorial zur Installation und Bereitstellung des automatischen Mount-Dienstes Autofs unter Linux
Artikel empfehlen
Lösung für das Problem, dass MySQL zwar bei der Installation in WAMP gestartet werden kann, nach dem Neustart jedoch nicht mehr
Nach der ersten Installation von Wamp können alle...
Detaillierte Erläuterung der SEO-Optimierungsmethode für Vue-Entwicklungswebsites
Da der Datenbindungsmechanismus von Vue und ander...
Detaillierte Erläuterung der Schritte zur Konfiguration des Centos7-Bridge-Netzwerks unter VMware
Die vollständigen Schritte zur Konfiguration des ...
MySQL 8.0.19 Installations-Tutorial
Laden Sie das Installationspaket von der offiziel...
ByteDance-Interview: So implementieren Sie mit JS die gleichzeitige Anforderungssteuerung von Ajax
Vorwort Ehrlich gesagt fühle ich mich in letzter ...
Implementieren Sie eine MaterialUI-Button-Klickanimation auf Basis von CSS und kapseln Sie sie in eine React-Komponente ein.
Vorwort Als intensiver Benutzer von Front-End-Fra...
Implementierungsbeispiel für die Docker-Bereitstellung von Front-End- und Back-End-Trennprojekten
Inhaltsverzeichnis 1. Umweltvorbereitung 2. Ausfü...
Beispiel für die Implementierung der Graphql-Schnittstelle in Vue
Hinweis: In diesem Artikel geht es um die grundle...
Beispiel zum Hochladen eines Docker-Images in ein privates Repository
Das Image kann problemlos direkt in das öffentlic...
vue.js lädt Bilder entsprechend der Bild-URL herunter
Als ich kürzlich an einem Frontend-Docking-Funkti...
Einführung in den Aufbau von NFS-Diensten unter Centos7
Inhaltsverzeichnis 1. Server 2. Kunde 3. Testdien...
Detaillierte Erklärung der HTML-Programmier-Tags und der Dokumentstruktur
Der Zweck der Verwendung von HTML zum Markieren v...
HTML implementiert problemlos abgerundete Rechtecke
Frage: Wie erreiche ich mit Div+CSS und Positioni...
Detaillierte Erklärung der Methode getBoundingClientRect() in js
1. getBoundingClientRect() Analyse Die Methode ge...
Div adaptive Höhe füllt automatisch die verbleibende Höhe
Szenario 1: HTML: <div Klasse="äußere&quo...