CSS Card:纯css制作扑克牌

制作扑克的html代码

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

建立一个div,赋予两个class属性:cardand suitdiamonds

.代码

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

    就可以了。

    .代码

      • A

      现在你头脑里要时刻记住,我们的目的不仅仅是要制作一张扑克牌,而且要用最简洁的代码,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. }

          先看看效果:

          CSS Card:纯css制作扑克牌


          现在看起来是不是已经有卡片的效果了,但是总感觉还缺少些什么-梅花、方块、红桃、黑桃。如果我们要显示这些图形但又不引入图片的话,事情将变得复杂起来,但是我们还是有解决问题的技巧的。精心开发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. }

                下面看看效果

                CSS Card:纯css制作扑克牌


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

                .代码

                    • A
                    • A
                    • A
                    • A

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

                  .代码

                  1. .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. }

                    CSS Card:纯css制作扑克牌

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

                    html

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

                    .代码

                        • A
                        • A
                        • A
                        • A

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

                      css

                      .代码

                      1. .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. }

                        鼠标移上去的效果:

                        .代码

                        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. } CSS Card:纯css制作扑克牌
                            点击复制链接 与好友分享!回本站首页
                            您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力
                            上一篇:常用的CSS Hack技术集锦
                            下一篇:css移动端:acitve效果的实现
                            相关文章
                            图文推荐

                            CSS Card:纯css制作扑克牌
                            CSS高效开发实战:CSS
                            CSS3实战开发: 纯CS
                            CSS3实战开发:手把手
                            CSS3实战开发:手把手
分类:默认分类 时间:2015-03-06 人气:4
本文关键词:
分享到:

相关文章

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.150 (s). 10 q(s)