CSS Card:纯css制作扑克牌

制作扑克的html代码

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

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

2. 往这个p中添加卡片的内容，只需要一个包含字母A的段落标记

   就可以了。

   .代码

   2. A

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

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

      css代码

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

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

          就如上面的代码所示，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. }
                6. .suithearts:before, .suithearts:after {
                7. content: "?";
                8. color: #ff0000;
                9. }
                11. .suitclubs:before, .suitclubs:after {
                12. content: "?";
                13. color: #000;
                14. }
                16. .suitspades:before, .suitspades:after {
                17. content: "?";
                18. color: #000;
                19. }

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

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

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

                        下面看看效果

                        

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

                        .代码

                        4. A

                        8. A

                        12. A

                        16. A

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

                            .代码
                            1. .hand {
                            2. margin: 50px;
                            3. }
                            5. /* For modern browsers */
                            6. .hand:before,
                            7. .hand:after {
                            8. content:"";
                            9. display:table;
                            10. }
                            12. .hand:after {
                            13. clear:both;
                            14. }
                            16. /* For IE 6/7 (trigger hasLayout) */
                            17. .hand {
                            18. zoom:1;
                            19. }
                            21. .card:hover {
                            22. cursor: pointer;
                            23. }

                                

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

                                html

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

                                .代码

                                4. A

                                8. A

                                12. A

                                16. A

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

                                    css

                                    .代码
                                    1. .spread {
                                    2. width: 350px;
                                    3. height: 250px;
                                    4. position: relative;
                                    5. }
                                    7. .spread > .card {
                                    8. position: absolute;
                                    9. top: 0;
                                    10. left: 0;
                                    11. -webkit-transition: top 0.3s ease, left 0.3s ease;
                                    12. -moz-transition: top 0.3s ease, left 0.3s ease;
                                    13. -o-transition: top 0.3s ease, left 0.3s ease;
                                    14. -ms-transition: top 0.3s ease, left 0.3s ease;
                                    15. transition: top 0.3s ease, left 0.3s ease;
                                    16. }

                                        鼠标移上去的效果：

                                        .代码
                                        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. }
                                        9. .spread:hover .suithearts {
                                        10. left: 30px;
                                        11. top: 0px;
                                        12. -webkit-transform: rotate(0deg);
                                        13. -moz-transform: rotate(0deg);
                                        14. -o-transform: rotate(0deg);
                                        15. -ms-transform: rotate(0deg);
                                        16. transform: rotate(0deg);
                                        17. }
                                        19. .spread:hover .suitclubs {
                                        20. left: 60px;
                                        21. top: 5px;
                                        22. -webkit-transform: rotate(10deg);
                                        23. -moz-transform: rotate(10deg);
                                        24. -o-transform: rotate(10deg);
                                        25. -ms-transform: rotate(10deg);
                                        26. transform: rotate(10deg);
                                        27. }
                                        29. .spread:hover .suitspades{
                                        30. left: 80px;
                                        31. top: 10px;
                                        32. -webkit-transform: rotate(20deg);
                                        33. -moz-transform: rotate(20deg);
                                        34. -o-transform: rotate(20deg);
                                        35. -ms-transform: rotate(20deg);
                                        36. transform: rotate(20deg);
                                        37. }

                                            再加上点阴影效果 精心开发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. }