Javascript css spiele
Ich versuche gerade ein tic tac toe spiel zu schreiben, was nur mit CSS läuft kein Javascript. Ist das möglich? Ich versuche spiele, ohne Javascript zu schreiben für meine Schwester. Der Harken ist, es darf kein Javascript dabei sein, nur CSS und HTML. Ist das überhaupt möglich? Kennt ihr Spiele, die ohne das laufen? Wäre über jede Hilfe dankbar.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-tic-tac-toe-v4.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated html may be modified in any
way to fit your requirements.
=================================================================== */
#gr {width:300px; height:300px; position:relative; margin:40px auto; z-index:10;}
#button1 {display:block; width:200px; background:#585; font:normal 18px/26px 'texgyreadventorregular', arial, sans-serif; color:#fff; border:0; padding:10px; border-radius:4px; margin:0 auto; margin-top:100px; cursor:pointer;}
#gr:before {content:""; display:block; width:96px; height:300px; border:4px solid #777; border-width:0 4px; position:absolute; left:98px; top:0; z-index:-1;}
#gr:after {content:""; display:block; width:300px; height:96px; border:4px solid #777; border-width:4px 0; position:absolute; left:0; top:98px; z-index:-1;}
#gr div {position:absolute; left:0; top:0; width:300px; height:300px; z-index:5;}
#gr p {padding:280px 0 0 0 !important; margin:0; font: 50px/100px 'texgyreadventorregular', arial, sans-serif !important; color:#c00 !important; width:300px; text-align:center; position:absolute; left:0; top:0; z-index:-1; opacity:0; transition:0.5s 1s;}
#gr input {display:none; position:absolute; left:-9999px;}
#gr label {display:block; width:100px; height:100px; cursor:pointer; float:left;}
#gr span {width:100px; height:100px; position:absolute; z-index:-1; opacity:0; font:70px/100px 'texgyreadventorregular', arial, sans-serif; color:#000; text-align:center; transition:0.5s;}
#gr span[id*="x"] {transition:0.5s 0.5s;}
#gr span[id*="d"] {transition:0.5s 0.5s;}
#gr span[id*="1"] {left:0; top:0;}
#gr span[id*="2"] {left:100px; top:0;}
#gr span[id*="3"] {left:200px; top:0;}
#gr span[id*="4"] {left:0; top:100px;}
#gr span[id*="5"] {left:100px; top:100px;}
#gr span[id*="6"] {left:200px; top:100px;}
#gr span[id*="7"] {left:0; top:200px;}
#gr span[id*="8"] {left:100px; top:200px;}