纯CSS实现扑克牌效果

这也能用css来实现啊！为了演示方便，这里用javascript代码去控制了扑克牌的切换，挺不错的。
</p> <p><title>playing cards with css3!</title> </p> <p>body { background: #dddddd; overflow: hidden; }<br /> body .fire { color: #ff0000; }<br /> p {<br /> background: #ffffff; border: 1px solid #cccccc;<br /> border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;<br /> box-shadow: 5px 5px 5px #cccccc; -webkit-box-shadow: 5px 5px #cccccc; -moz-box-shadow: 5px 5px #cccccc;<br /> filter: progid:dximagetransform.microsoft.shadow(color='#cccccc', direction=135, strength=5);<br /> font-size: 25px; text-align: center;<br /> height: 30px; width: 600px; margin: -35px -300px; padding: 10px 15px; position: absolute; bottom: 50px; left: 50%; z-index: 99;<br /> }<br /> ul {<br /> background: #ffffff; border: 1px solid #cccccc;<br /> background:-moz-linear-gradient(top, #ffffff, #dddddd); background:-webkit-gradient(linear,0 0, 0 100%, from(#ffffff), to(#dddddd));<br /> border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;<br /> box-shadow: 5px 5px 5px #cccccc; -webkit-box-shadow: 5px 5px #cccccc; -moz-box-shadow: 5px 5px #cccccc;<br /> filter: progid:dximagetransform.microsoft.shadow(color='#cccccc', direction=135, strength=5);<br /> font-size: 50px;<br /> margin: 0; padding: 0 15px; position: absolute; right: 20px; top: 15px; z-index: 99;<br /> }<br /> ul li {<br /> display: inline;<br /> list-style-type: none;<br /> }<br /> ul li a {<br /> color: #000000;<br /> display: block; float: left; padding: 0 10px;<br /> text-decoration: none;<br /> }<br /> .base {<br /> background: #ffffff; border: 1px solid #cccccc; color: #000000;<br /> background:-moz-linear-gradient(top, #ffffff, #dddddd); background:-webkit-gradient(linear,0 0, 0 100%, from(#ffffff), to(#dddddd));<br /> border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;<br /> box-shadow: 5px 5px 5px #cccccc; -webkit-box-shadow: 5px 5px #cccccc; -moz-box-shadow: 5px 5px #cccccc;<br /> filter: progid:dximagetransform.microsoft.shadow(color='#cccccc', direction=135, strength=5);<br /> height: 360px; top: 50%; margin-top: -180px; width: 260px; left: 50%; margin-left: -130px; z-index: 9;<br /> cursor: pointer; font-size: 50px; text-decoration: none;<br /> padding: 15px 0 0 25px; position: absolute;<br /> }<br /> strong {<br /> font-size: 250px;<br /> position: absolute; left: 50%; top: 50%; margin-top: -160px;<br /> -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1)));<br /> }<br /> em {<br /> font-size: 40px; font-style: normal;<br /> display: block; margin-bottom: -15px;<br /> }<br /> label span {<br /> -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter: progid:dximagetransform.microsoft.basicimage(rotation=2);<br /> position: absolute; bottom: 15px; right: 25px;<br /> }<br /> #spades strong { margin-left: -68px; } #spades em { margin-left: 0; }<br /> #hearts strong { margin-left: -70px; } #hearts em { margin-left: 1px; }<br /> #clubs strong { margin-left: -80px; } #clubs em { margin-left: 3px; }<br /> #diamonds strong { margin-left: -60px; } #diamonds em { margin-left: -2px; }<br /> fieldset { display: none; }<br /> fieldset:target { display: block; }<br /> fieldset:target .card+label { -webkit-animation-name: scaler; -webkit-animation-duration: 1.75s; -webkit-animation-iteration-count: 1; }<br /> fieldset:target .card:checked+label { -webkit-animation-name: effectx; -webkit-animation-duration: 3s; -webkit-transform: scale(0); }<br /> .close {<br /> background: #dddddd; cursor: default;<br /> left: 0; top: 0; position: absolute; height: 100%; width: 100%; z-index: 1;<br /> text-indent: -999em;<br /> }<br /> @-webkit-keyframes scaler { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); } }<br /> @-webkit-keyframes effectx {<br /> from { -webkit-transform: rotatex(0deg); }<br /> to { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotatex(-90deg) translatez(500px) rotate(180deg); -webkit-animation-duration: 30s; }<br /> } </p> <p>function bootup(){<br /> if (location.hash == "") { location.hash="#spades"; } var tds = document.getelementsbytagname("a"); direct();<br /> for( var x=0; x 5.6)<br /> var counted = document.getelementsbytagname("fieldset");<br /> for( var x=0; x < counted.length; x++ ){ counted[x].style.display = "none" }<br /> document.getelementbyid(location.hash.substr(1)).style.display = "block";<br /> @end @*/<br /> }<br /> window.onload=bootup; </p> <ul> <li>♠</li> <li>♥</li> <li>♣</li> <li>♦</li> </ul> <fieldset id="spades"><label class="base" for="spade" title="this is the ace of spades!"><span><em>a</em>♠</span><strong>♠</strong><em>a</em>♠</label><label class="close" for="cancel1">spades</label></fieldset> <fieldset id="hearts"><label class="base fire" for="heart" title="this is the ace of hearts!"><span><em>a</em>♥</span><strong>♥</strong><em>a</em>♥</label><label class="close" for="cancel2">hearts</label></fieldset> <fieldset id="clubs"><label class="base" for="club" title="this is the ace of clubs!"><span><em>a</em>♣</span><strong>♣</strong><em>a</em>♣</label><label class="close" for="cancel3">clubs</label></fieldset> <fieldset id="diamonds"><label class="base fire" for="diamond" title="this is the ace of diamonds!"><span><em>a</em>♦</span><strong>♦</strong><em>a</em>♦</label><label class="close" for="cancel4">diamonds</label></fieldset> <p>select an option above to change the suit displayed!</p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]