首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS 扑克牌效果实现代码
所属分类：
网页制作
/
CSS
阅读数： 808
收藏 0
赞 0
分享
非常不错的效果代码。
<!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> <!-- Normal page content. --> <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>
提示：您可以先修改部分代码再运行
更多精彩内容
其他人还在看
2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼
这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
前端设计师需要了解的9个问题
这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项，非常的实用，是篇非常不错的文章，这里推荐给大家
评论 0
收藏 0
赞 0
分享
CSS强制性换行的方法区别详解
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
评论 0
收藏 0
赞 0
分享
CSS语义化命名方式及常用命名规则
本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
评论 0
收藏 0
赞 0
分享
ul li内容宽度的问题的解决方案
在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
评论 0
收藏 0
赞 0
分享
html5+css3气泡组件的实现
本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
评论 0
收藏 0
赞 0
分享
html5+css3之CSS中的布局与Header的实现
本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。
评论 0
收藏 0
赞 0
分享
一款恶搞头像特效的制作过程 利用css3和jquery
今天给大家介绍一款恶搞头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
评论 0
收藏 0
赞 0
分享
大图片根据分辨率自适应宽度仍居中显示
一个1920*900的大图，在1024*768的分辨率下仍居中显示，如何做到这一点，下面是一个可行的解决方案
评论 0
收藏 0
赞 0
分享
CSS3提交意见输入框样式代码
这个提交意见输入框，结构使用到了table，样式用的css3，包含了多方面的知识，比较适合新手朋友们
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
男子凭一张八卦图忽悠60多亲友发红包 短短1小时内获得300元红包
淘宝客服退款竟是诈骗新招 南昌网友17.5万元险被骗走
全面剖析日赚500元项目的骗局
营销型网站建设提高网站转化率的方法
企业网站通过流量变现有哪些关键的环节需要注意？
SEO赚钱的途径有几种？简析当前靠SEO赚钱的几种途径
站长故事
更多
阿里会成为下一个谷歌？谁是Google真正的挑战者
站长们,就别在折腾你的用户了
比较适合个人站长的5种类型网站：定位 坚持 收益
八零后站长们：我们都是“囧”的一代
俞敏洪如何被北大逼上梁山
90后男子新婚杀妻后将照片发朋友圈续：被判死缓
