CSS 扑克牌效果实现代码

2021-08-08 15:27:15

非常不错的效果代码。 ...

非常不错的效果代码。

<!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" xml:lang="en" lang="en"> 
<head> 
<title>BrainJar.com: Playing Cards with CSS</title> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<style id="cardStyles" type="text/css"> 
/****************************************************************************** 
* Styles for playing cards. * 
******************************************************************************/ 
.card { 
background-image: url("graphics/cardback.gif"); 
border-color: #808080 #000000 #000000 #808080; 
border-width: 1px; 
border-style: solid; 
font-size: 20pt; 
position: absolute; 
width: 3.75em; 
height: 5.00em; 
} 
.front { 
background-color: #ffffff; 
color: #000000; 
position: absolute; 
width: 100%; 
height: 100%; 
} 
.red { color: #ff0000; } 
.index { 
font-size: 50%; 
font-weight: bold; 
text-align: center; 
position: absolute; 
left: 0.25em; 
top: 0.25em; 
} 
.ace { 
font-size: 300%; 
position: absolute; 
left: 0.325em; 
top: 0.250em; 
} 
.face { 
border: 1px solid #000000; 
position: absolute; 
left: 0.50em; 
top: 0.45em; 
width: 2.6em; 
height: 4.0em; 
} 
.spotA1 { position: absolute; left: 0.60em; top: 0.5em; } 
.spotA2 { position: absolute; left: 0.60em; top: 1.5em; } 
.spotA3 { position: absolute; left: 0.60em; top: 2.0em; } 
.spotA4 { position: absolute; left: 0.60em; top: 2.5em; } 
.spotA5 { position: absolute; left: 0.60em; top: 3.5em; } 
.spotB1 { position: absolute; left: 1.55em; top: 0.5em; } 
.spotB2 { position: absolute; left: 1.55em; top: 1.0em; } 
.spotB3 { position: absolute; left: 1.55em; top: 2.0em; } 
.spotB4 { position: absolute; left: 1.55em; top: 3.0em; } 
.spotB5 { position: absolute; left: 1.55em; top: 3.5em; } 
.spotC1 { position: absolute; left: 2.50em; top: 0.5em; } 
.spotC2 { position: absolute; left: 2.50em; top: 1.5em; } 
.spotC3 { position: absolute; left: 2.50em; top: 2.0em; } 
.spotC4 { position: absolute; left: 2.50em; top: 2.5em; } 
.spotC5 { position: absolute; left: 2.50em; top: 3.5em; } 
/****************************************************************************** 
* Miscellaneous styles. * 
******************************************************************************/ 
body { 
background-color: #40a040; 
} 
</style> 
<script type="text/javascript">//<![CDATA[ 
var minSize = 8; 
function resizeCards(d) { 
var n; 
// Change the font size on the "card" style class. 
// DOM-compliant browsers. 
if (document.styleSheets[1].cssRules) { 
n = parseInt(document.styleSheets[1].cssRules[0].style.fontSize, 10); 
document.styleSheets[1].cssRules[0].style.fontSize = Math.max(n + d, minSize) + "pt"; 
// For NS 6.1, insert a dummy rule to force styles to be reapplied. 
if (navigator.userAgent.indexOf("Netscape6/6.1") >= 0) 
document.styleSheets[1].insertRule(null, document.styleSheets[1].cssRules.length); 
} 
// IE browsers. 
else if (document.styleSheets[1].rules[0]) { 
n = parseInt(document.styleSheets[1].rules[0].style.fontSize, 10); 
document.styleSheets[1].rules[0].style.fontSize = Math.max(n + d, minSize) + "pt"; 
} 
return false; 
} 
//]]></script> 
</head> 
<body> 
 
<div style="position:relative;margin-top:1em;"> 
<div class="card" style="left:0em;top:0em;"> 
<div class="front"> 
<div class="index">10
♠</div> 
<div class="spotA1">♠</div> 
<div class="spotA2">♠</div> 
<div class="spotA4">♠</div> 
<div class="spotA5">♠</div> 
<div class="spotB2">♠</div> 
<div class="spotB4">♠</div> 
<div class="spotC1">♠</div> 
<div class="spotC2">♠</div> 
<div class="spotC4">♠</div> 
<div class="spotC5">♠</div> 
</div> 
</div> 
<div class="card" style="left:4em;top:0em;"> 
<div class="front red"> 
<div class="index">9
♥</div> 
<div class="spotA1">♥</div> 
<div class="spotA2">♥</div> 
<div class="spotA4">♥</div> 
<div class="spotA5">♥</div> 
<div class="spotB3">♥</div> 
<div class="spotC1">♥</div> 
<div class="spotC2">♥</div> 
<div class="spotC4">♥</div> 
<div class="spotC5">♥</div> 
</div> 
</div> 
<div class="card" style="left:8em;top:0em;"> 
<div class="front"> 
<div class="index">8
♣</div> 
<div class="spotA1">♣</div> 
<div class="spotA3">♣</div> 
<div class="spotA5">♣</div> 
<div class="spotB2">♣</div> 
<div class="spotB4">♣</div> 
<div class="spotC1">♣</div> 
<div class="spotC3">♣</div> 
<div class="spotC5">♣</div> 
</div> 
</div> 
<div class="card" style="left:12em;top:0em;"> 
<div class="front red"> 
<div class="index">7
♦</div> 
<div class="spotA1">♦</div> 
<div class="spotA3">♦</div> 
<div class="spotA5">♦</div> 
<div class="spotB2">♦</div> 
<div class="spotC1">♦</div> 
<div class="spotC3">♦</div> 
<div class="spotC5">♦</div> 
</div> 
</div> 
<div class="card" style="left:16em;top:0em;"> 
<div class="front"> 
<div class="index">6
♠</div> 
<div class="spotA1">♠</div> 
<div class="spotA3">♠</div> 
<div class="spotA5">♠</div> 
<div class="spotC1">♠</div> 
<div class="spotC3">♠</div> 
<div class="spotC5">♠</div> 
</div> 
</div> 
<div class="card" style="left:20em;top:0em;"> 
<div class="front red"> 
<div class="index">5
♥</div> 
<div class="spotA1">♥</div> 
<div class="spotA5">♥</div> 
<div class="spotB3">♥</div> 
<div class="spotC1">♥</div> 
<div class="spotC5">♥</div> 
</div> 
</div> 
<div class="card" style="left:0em;top:6em;"> 
<div class="front"> 
<div class="index">4
♣</div> 
<div class="spotA1">♣</div> 
<div class="spotA5">♣</div> 
<div class="spotC1">♣</div> 
<div class="spotC5">♣</div> 
</div> 
</div> 
<div class="card" style="left:4em;top:6em;"> 
<div class="front red"> 
<div class="index">3
♦</div> 
<div class="spotB1">♦</div> 
<div class="spotB3">♦</div> 
<div class="spotB5">♦</div> 
</div> 
</div> 
<div class="card" style="left:8em;top:6em;"> 
<div class="front"> 
<div class="index">2
♠</div> 
<div class="spotB1">♠</div> 
<div class="spotB5">♠</div> 
</div> 
</div> 
<div class="card" style="left:12em;top:6em;"> 
<div class="front red"> 
<div class="index">A
♥</div> 
<div class="ace">♥</div> 
</div> 
</div> 
</div> 
</body> 
</html>

提示：您可以先修改部分代码再运行