This can also use CSS to achieve AH! In order to demonstrate the convenience, here uses the JavaScript code to control the poker switch, quite good.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" lang= "en" > <pead> <meta http-equiv= "Content-type" text/html; Charset=utf-8 '/> <title>playing Cards with css3!</title> <style type= ' text/css ' > body {backgroun D: #DDDDDD; Overflow:hidden; Body. Fire {color: #FF0000;} p {background: #FFFFFF; border:1px solid #CCCCCC; border-radius:5px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:5px 5px 5px #CCCCCC; -webkit-box-shadow:5px 5px #CCCCCC; -moz-box-shadow:5px 5px #CCCCCC; Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' #CCCCCC ', direction=135, strength=5); font-size:25px; Text-align:center; height:30px; width:600px; margin: -35px-300px; padding:10px 15px; Position:absolute; bottom:50px; left:50%; z-index:99; UL {background: #FFFFFF; border:1px solid #CCCCCC; BackgrouNd:-moz-linear-gradient (Top, #FFFFFF, #DDDDDD); Background:-webkit-gradient (linear,0 0, 0 100%, from (#FFFFFF), to (#DDDDDD)); border-radius:5px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:5px 5px 5px #CCCCCC; -webkit-box-shadow:5px 5px #CCCCCC; -moz-box-shadow:5px 5px #CCCCCC; Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' #CCCCCC ', direction=135, strength=5); font-size:50px; margin:0; Padding:0 15px; Position:absolute; right:20px; top:15px; z-index:99; } ul li {display:inline; List-style-type:none; UL li a {color: #000000; Display:block; Float:left; Padding:0 10px; Text-decoration:none; }. Base {background: #FFFFFF; border:1px solid #CCCCCC; color: #000000; Background:-moz-linear-gradient (Top, #FFFFFF, #DDDDDD); Background:-webkit-gradient (linear,0 0, 0 100%, from (#FFFFFF), to (#DDDDDD)); border-radius:5px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:5px 5px 5px #CCCCCC; -webkit-box-shadow:5px 5px #CCCCCC; -moz-box-shadow:5px 5px #CCCCCC; Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' #CCCCCC ', direction=135, strength=5); height:360px; top:50%; Margin-top: -180px; width:260px; left:50%; Margin-left: -130px; Z-index:9; Cursor:pointer; font-size:50px; Text-decoration:none; padding:15px 0 0 25px; Position:absolute; } strong {font-size:250px; Position:absolute; left:50%; top:50%; Margin-top: -160px; -webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (Rgba (0,0,0,0.4)), to (Rgba (0,0,0,1))); } em {font-size:40px; font-style:normal; Display:block; Margin-bottom: -15px; Label span {-webkit-transform:rotate ( -180DEG);-moz-transform:rotate ( -180deg);-o-transform:rotate ( -180deg); filte R:progid:dximagetransform.microsoft.basicimage (rotation=2); Position:absolute; bottom:15px; right:25px; } #spades Strong {margin-left: -68px;} #spades em {margin-left:0;} #hearts Strong {margin-left: -70px;} #heArts em {margin-left:1px;} #clubs Strong {margin-left: -80px;} #clubs em {margin-left:3px;} #diamonds Strong {margin-left: -60px;} #diamonds em {margin-left: -2px;} fieldset {display:none;} fieldset:target {display:block;} Fieldset:target. Card+label {-webkit-animation-name:scaler;-webkit-animation-duration:1.75s;- Webkit-animation-iteration-count:1; } fieldset:target. card:checked+label {-webkit-animation-name:effectx;-webkit-animation-duration:3s;- Webkit-transform:scale (0); Close {background: #DDDDDD; cursor:default; left:0; top:0; Position:absolute; height:100%; width:100%; Z-index:1; Text-indent: -999em; } @-webkit-keyframes Scaler {from {-webkit-transform:scale (0);} to {-webkit-transform:scale (1);}} @-webkit-keyframes Effectx {from {-webkit-transform:rotatex (0deg);} to {-webkit-transform:scale3d (1.2, 1.2, 1.2) Rotatex ( -90deg) Translatez (500px) rotate (180deg);- webkit-animation-duration:30s; }} </style> <script type= "Text/javascript" > Function bootup () {if (Location.hash = "") {location.hash= "#spades";} var TDs = document.getElementsByTagName ("a"); Direct (); for (Var x=0 x < tds.length/x + +) {Tds[x].onclick = function () {settimeout (direct, 1);};} The function Direct () {/* @cc_on @if (@_jscript_version > 5.6) var counted = document.getElementsByTagName ("fieldset"); for (Var x=0 x < counted.length/x + +) {Counted[x].style.display = "none"} document.getElementById (LOCATION.HASH.S UBSTR (1)). Style.display = "block"; @end @*/} window.onload=bootup; </script> </pead> <body> <ul><li>♠</li><li>♥</li><li>♣</ li><li>♦</li></ul> <form action= "" > <fieldset id= "Spades" ><input "card" ID = "Spade" type= "Radio" name= "Spade" value= "spade"/><label class= "base" for= "Spade" title= "This is the Ace of spades! "><span><em>a</em>♠</span><strong>♠</strong><em>a</em>♠</label><input id= "Cancel1" type= "reset" name= "Spade" Cancel "checked=" checked "/><label class=" Close "for=" Cancel1 ">Spades</label></fieldset> < FieldSet id= "Hearts" ><input class= "card" id= "Heart" type= "Radio" name= "Heart" value= "Heart"/><label class = "Base Fire" for= "Heart" title= "This is the Ace of hearts!" ><span><em>a</em>♥</span><strong>♥</strong><em>a</em>♥</ Label><input id= "Cancel2" type= "reset" name= "Heart" value= "Cancel" checked= "Checked"/><label "class=" Close "for=" Cancel2 ">Hearts</label></fieldset> <fieldset id=" clubs "><input class=" card "id= "Club" type= "Radio" name= "Club" value= "club"/><label class= "base" for= "Club" title= "This is the Ace of clubs!" ><span><em>a</em>♣</span><strong>♣</strong><em>a</em>♣</ Label><input id= "Cancel3 "type=" "Reset" Name= "club" value= "Cancel" checked= "checked"/><label class= "Close" for= "Cancel3" >clubs</ Label></fieldset> <fieldset id= "Diamonds" ><input class= "card" id= "Diamond" type= "Radio" name= " Diamond "value=" Diamond "/><label class=" base Fire "for=" Diamond "title=" This is the Ace of diamonds! " ><span><em>a</em>♦</span><strong>♦</strong><em>a</em>♦</ Label><input id= "Cancel4" type= "reset" name= "Diamond" value= "Cancel" checked= "Checked"/><label "class=" Close "for=" Cancel4 ">Diamonds</label></fieldset> </form> <p>select a option above to Change the suit displayed!</p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
