Pure CSS achieves playing card effect, css implements playing card
<! 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">
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/>
<Title> CSS implements playing cards! </Title>
<Style type = "text/css">
Body {background: # 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 # 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 # 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 {
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 # 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.4, 0,), to (rgba, 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); filter:
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.75 s;-webkit-animation-iteration-count: 1 ;}
Fieldset: target. card: checked + label {-webkit-animation-name: shorttx;-webkit-animation-duration: 3 s;-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 release TX {
From {-webkit-transform: rotateX (0deg );}
To {-webkit-transform: scale3d (1.2, 1.2, 1.2) rotateX (-90deg) translateZ (500px) rotate (180deg);-webkit-animation-duration: 30 s ;}
}
</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 );};}
}
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. substr (1). style. display = "block ";
@ End @*/
}
Window. onload = bootup;
</Script>
</Head>
<Body>
<Ul> <li> <a title = "Select Spades" href = "# spades"> & amp; #9824; </a> </li> <a class = "fire" title = "Select Hearts" href = "# hearts" >&# 9829; </a> </li> <a title = "Select Clubs"
Href = "# clubs"> & #9827; </a> </li> <a class = "fire" title = "Select Diamonds" href = "# diamonds" >&# 9830; </a> </li> </ul>
<Form action = "">
<Fieldset id = "spades"> <input class = "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> & #9824; </span> <strong> & #9824; </strong> <em> A </em> & amp; #9824; </label> <input id = "cancel1" type = "reset" name = "spade" value = "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> & #9829; </span> <strong> & #9829; </strong> <em> A </em> & amp; #9829; </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
Clubs! "> <Span> <em> A </em> & #9827; </span> <strong> & #9827; </strong> <em> A </em> & amp; #9827; </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> & #9830; </span> <strong> & #9830; </strong> <em> A </em> & #9830; </label> <input id = "cancel4" type = "reset"
Name = "diamond" value = "cancel" checked = "checked"/> <label class = "close" for = "cancel4"> Diamonds </label> </fieldset>
</Form>
<Div> http://www.999jiujiu.com/</div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
