前面介绍了制作的扑克牌是用图片的方式来实现,它逼真地还原了扑克牌。下面介绍一种比较简单的实现方法,这种方法不用一张图片。
原理是:用四个特别字符的html标签来实现。
- ♠表示黑桃
- ♥表示红心
- ♣表示梅花
- ♦表示方块
先写结构:
<div class="card" style="left:10px;top:20px;"> <div class="front"> <b class="index">9<br />♠</b> <span class="A1">♠</span> <span class="A2">♠</span> <span class="A3">♠</span> <span class="A4">♠</span> <span class="B1">♠</span> <span class="C1">♠</span> <span class="C2">♠</span> <span class="C3">♠</span> <span class="C4">♠</span> <b class="end">♠<br/>9</b> </div> </div>
再写样式:
<style type="text/css"> .card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中间图片通用设置*/ span{ display:block; width:20px; height:30px; line-height:30px; position:absolute; font-size:26px; left: 22px; top: 130px; } /*小图片通用设置*/ /*数字通用设置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;} /*各坐标点位置*/ .A1{left:21px;top:10px;} .A2{left:21px;top:50px;} .A3{left:21px;top:90px;} .A4{left:21px;top:130px;} .B1{left:51px;top:76px;} .C1{left:83px;top:10px;} .C2{left:83px;top:50px;} .C3{left:83px;top:90px;} .C4{left:83px;top:130px;} .scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
.index { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; left:5px; top:0px; }
.end { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; right:5px; bottom:0px; } .red { color: #ff0000; } .font{font-size:34px;} </style>
注意:为了真实的还原一张扑克牌,我在第二张扑克牌中加入滤镜功能,让下面的图案垂直翻转,但这种方法会造成图片不清晰,并且这种方法只有IE系列的浏览器才能识别,如果高手们有其它更好的办法,请不吝赐教!
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
出处:蓝色理想
责任编辑:bluehearts
上一页 css sprites图片背景优化技术 下一页 动起来
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|