CSS Card:纯css制作扑克牌

当前位置 : 首页 > 网页制作 > CSS > CSS Card:纯css制作扑克牌

CSS Card:纯css制作扑克牌

来源: 作者: 时间:2016-01-23 10:51
制作扑克的html代码 第一步是制作扑克的html,我的原则是用最少最简洁的代码,不引用任何图片,也许你认为不可能,但是你还是乖乖的看我是如何工作的吧。建立一个div,赋予两个c

制作扑克的html代码

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

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

.代码

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

就可以了。

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

      先看看效果:

      screenshot

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

            下面看看效果

            screenshot

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

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

      screenshot

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

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

      .代码
      1. A

      2. A

      3. A

      4. A

      5. 精心开发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. }

              screenshot
              Tag:
              网友评论
              
              <