CSS Card:纯css制作扑克牌

制作扑克的html代码

第一步是制作扑克的html，我的原则是用最少最简洁的代码，不引用任何图片，也许你认为不可能，但是你还是乖乖的看我是如何工作的吧。

建立一个div，赋予两个class属性：cardand suitdiamonds

.代码

1. <div class="card suitdiamonds">
2. </div>

往这个div中添加卡片的内容，只需要一个包含字母A的段落标记<P>就可以了。

.代码

1. <div class="card suitdiamonds">
2. <p>A</p>
3. </div>

现在你头脑里要时刻记住，我们的目的不仅仅是要制作一张扑克牌，而且要用最简洁的代码，html部分的代码就只需要这么多了（够简洁吧）。

精心开发5年的UI前端框架！

css代码

css的第一步是规定基本的页面属性，这些属性将被card继承。

.代码

1. * {margin: 0; padding: 0;}
2. body {
3. background: #00a651;
4. }
5. .card {
6. position: relative;
7. float: left;
8. margin-right: 10px;
9. width: 150px;
10. height: 220px;
11. border-radius: 10px;
12. background: #fff;
13. -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
14. box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
15. }

就如上面的代码所示，card 的样式非常简单，白色背景，圆角，边框阴影，除了position属性为relative外没有什么特别的。

现在我们给A字母润色一下

.代码

1. .card p {
2. text-align: center;
3. font: 100px/220px Georgia, Times New Roman, serif;
4. }

先看看效果：

现在看起来是不是已经有卡片的效果了，但是总感觉还缺少些什么-梅花、方块、红桃、黑桃。如果我们要显示这些图形但又不引入图片的话，事情将变得复杂起来，但是我们还是有解决问题的技巧的。精心开发5年的UI前端框架！

考虑到我们不再想要给html部分添加更多的代码，我们引入伪元素before和after来给卡片添加梅花方块这些图形。幸运的是，绝大多数的浏览器都能识别各种种类的特殊符号。

.代码

1. .suitdiamonds:before, .suitdiamonds:after {
2. content: "?";
3. color: #ff0000;
4. }

我同时用before 和 after这样我就能得到上下两个方块图形，其他图形依葫芦画瓢。

.代码

1. .suitdiamonds:before, .suitdiamonds:after {
2. content: "?";
3. color: #ff0000;
4. }
5. .suithearts:before, .suithearts:after {
6. content: "?";
7. color: #ff0000;
8. }
9. .suitclubs:before, .suitclubs:after {
10. content: "?";
11. color: #000;
12. }
13. .suitspades:before, .suitspades:after {
14. content: "?";
15. color: #000;
16. }

如果你是一个仔细的人，你应该发现了这些方块梅花的方向貌似搞反了。其实css实现反转也很容易，但是考虑到没人会把屏幕倒过来看这张扑克牌，所以这是不必要的。

我们画好了扑克的符号，还应该修饰大小和合适的定位。方块、梅花、红桃黑桃的字体大小位置摆放以及position属性都是一致的，因此我们最好只写一次。div[class*=‘suit‘]选择器就可以同时选择这四个。（原文的评论里面有人建议单独用一个class来定义，因为作者的这个方法效率上讲要低一些） 精心开发5年的UI前端框架！

.代码

1. div[class*=‘suit‘]:before {
2. position: absolute;
3. font-size: 35px;
4. left: 5px;
5. top: 5px;
6. }
7. div[class*=‘suit‘]:after {
8. position: absolute;
9. font-size: 35px;
10. right: 5px;
11. bottom: 5px;
12. }

下面看看效果

上面我们只是制作了一张图片，现在我想制作一组图片的效果：

.代码

1. <div class="hand">
2. <div class="card suitdiamonds">
3. <p>A</p>
4. </div>
5. <div class="card suithearts">
6. <p>A</p>
7. </div>
8. <div class="card suitclubs">
9. <p>A</p>
10. </div>
11. <div class="card suitspades">
12. <p>A</p>
13. </div>
14. </div>

css 精心开发5年的UI前端框架！

.代码

1. <strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">.hand {
2. margin: 50px;
3. }
4. /* For modern browsers */
5. .hand:before,
6. .hand:after {
7. content:"";
8. display:table;
9. }
10. .hand:after {
11. clear:both;
12. }
13. /* For IE 6/7 (trigger hasLayout) */
14. .hand {
15. zoom:1;
16. }
17. .card:hover {
18. cursor: pointer;
19. }</strong>

接下来我想利用css做出一些有趣的动画效果来：开始的时候只显示一张扑克，当鼠标移上去，扑克会展开，就像你打牌的时候手里握牌的样子。

html

和之前不同的是我增加了spread class属性

.代码

1. <div class="hand spread">
2. <div class="card suitdiamonds">
3. <p>A</p>
4. </div>
5. <div class="card suithearts">
6. <p>A</p>
7. </div>
8. <div class="card suitclubs">
9. <p>A</p>
10. </div>
11. <div class="card suitspades">
12. <p>A</p>
13. </div>
14. </div>

精心开发5年的UI前端框架！

css

.代码

1. <strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">.spread {
2. width: 350px;
3. height: 250px;
4. position: relative;
5. }
6. .spread > .card {
7. position: absolute;
8. top: 0;
9. left: 0;
10. -webkit-transition: top 0.3s ease, left 0.3s ease;
11. -moz-transition: top 0.3s ease, left 0.3s ease;
12. -o-transition: top 0.3s ease, left 0.3s ease;
13. -ms-transition: top 0.3s ease, left 0.3s ease;
14. transition: top 0.3s ease, left 0.3s ease;
15. }</strong>

鼠标移上去的效果：

.代码

1. .spread:hover .suitdiamonds {
2. -webkit-transform: rotate(-10deg);
3. -moz-transform: rotate(-10deg);
4. -o-transform: rotate(-10deg);
5. -ms-transform: rotate(-10deg);
6. transform: rotate(-10deg);
7. }
8. .spread:hover .suithearts {
9. left: 30px;
10. top: 0px;
11. -webkit-transform: rotate(0deg);
12. -moz-transform: rotate(0deg);
13. -o-transform: rotate(0deg);
14. -ms-transform: rotate(0deg);
15. transform: rotate(0deg);
16. }
17. .spread:hover .suitclubs {
18. left: 60px;
19. top: 5px;
20. -webkit-transform: rotate(10deg);
21. -moz-transform: rotate(10deg);
22. -o-transform: rotate(10deg);
23. -ms-transform: rotate(10deg);
24. transform: rotate(10deg);
25. }
26. .spread:hover .suitspades{
27. left: 80px;
28. top: 10px;
29. -webkit-transform: rotate(20deg);
30. -moz-transform: rotate(20deg);
31. -o-transform: rotate(20deg);
32. -ms-transform: rotate(20deg);
33. transform: rotate(20deg);
34. }

再加上点阴影效果 精心开发5年的UI前端框架！

.代码

1. .spread > .card:hover {
2. -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,0.4);
3. box-shadow: 1px 1px 7px rgba(0,0,0,0.4);
4. }