制作一幅扑克牌系列二---不用图片的纯css实现方法

制作一幅扑克牌系列二---不用图片的纯css实现方法

本站原创：biny 时间：2009年2月20日21:38:11 转载请注明出处

前面介绍了制作的扑克牌是用图片的方式来实现，它逼真地还原了扑克牌。下面介绍一种比较简单的实现方法，这种方法不用一张图片。

原理是：用四个特别字符的html标签来实现。

1.&spades;表示黑桃

2.&hearts;表示红心

3.&clubs;表示梅花

4.&diams;表示方块

先写结构：

9 &spades;

&spades;

&spades;

&spades;

&spades;

&spades;

&spades;

&spades;

&spades;

&spades;

&spades; 9

</div>

再写样式：

.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系列的浏览器才能识别，如果高手们有其它更好的办法，请不吝赐教

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:style type="text/css"><BGSOUND CEP="0" /></mce:style><style type="text/css" mce_bogus="1">.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>
</head>
<body>
<BGSOUND CEP="1" />
<div class="card" style="left:10px;top:20px;">
<div class="front">
9 ♠
♠
♠
♠
♠
♠
♠
♠
♠
♠
♠<br/ />9
</div>
</div>
<BGSOUND CEP="2" />
<div class="card" style="left:175px;top:20px;">
<div class="front red">
9 ♥
♥
♥
♥
♥
♥
♥
♥
♥
♥
♥<br/ />9
</div>
</div>
<BGSOUND CEP="3" />
<div class="card" style="left:340px;top:20px;">
<div class="front red">
9 ♣
♣
♣
♣
♣
♣
♣
♣
♣
♣
9<br/ />♣
</div>
</div>
<BGSOUND CEP="4" />
<div class="card" style="left:510px;top:20px;">
<div class="front red">
9 ♦
♦
♦
♦
♦
♦
♦
♦
♦
♦
♦<br/ />9
</div>
</div>
</body>
</html>

posted @ 2009-02-20 21:44 Biny 阅读(834) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述

冰极峰

简单生活，简单生活！

制作一幅扑克牌系列二---不用图片的纯css实现方法

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (93)

随笔档案 (60)

文章档案 (15)

extend

other

好友链接

前端团队

资源链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论