搜索

首页  >  文章  >  web前端  >  CSS Card:纯css制作扑克牌_html/css_WEB-ITnose

CSS Card:纯css制作扑克牌_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:56:391581浏览

制作扑克的html代码

 

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

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

.代码 

  1.   
  

 

 

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

就可以了。

.代码 

  1.   
  2.   

    A

      
  

 

 

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

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

css代码

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

.代码 

  1. * {margin: 0; padding: 0;}  
  2.          
  3. body {  
  4.   background: #00a651;  
  5. }  
  6.          
  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. }  
  5.          
  6. .suithearts:before, .suithearts:after {  
  7.   content: "?";  
  8.   color: #ff0000;  
  9. }  
  10.          
  11. .suitclubs:before, .suitclubs:after {  
  12.   content: "?";  
  13.   color: #000;  
  14. }  
  15.          
  16. .suitspades:before, .suitspades:after {  
  17.   content: "?";  
  18.   color: #000;  
  19. }  

 

 

如果你是一个仔细的人，你应该发现了这些方块梅花的方向貌似搞反了。其实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.         
  8. div[class*='suit']:after {  
  9.   position: absolute;  
  10.   font-size: 35px;  
  11.   right: 5px;  
  12.   bottom: 5px;  
  13. }  

 

 

下面看看效果

 

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

.代码 

  1.   
  2.      
  3.   
      
  4.     

    A

      
  5.   
  
  •      
  •   
      
  •     

    A

      
  •   
    •   
  •        
  •   
      
  •     

    A

      
  •   
    •   
  •        
  •   
      
  •     

    A

      
  •   
    •   
  •      
    •   

     

     

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

    .代码 

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

     

     

     

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

    html

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

    .代码 

    1.   
    2.     
    3.   
        
    4.     

      A

        
    5.   
      6.   
    6.     
    7.   
        
    8.     

      A

        
    9.   
      10.   
    10.       
    11.   
        
    12.     

      A

        
    13.   
      14.   
    14.       
    15.   
        
    16.     

      A

        
    17.   
      18.   
    18.     
      20.   
      精心开发5年的UI前端框架！

     

     

    css

    .代码 

    1. .spread {  
    2.   width: 350px;  
    3.   height: 250px;  
    4.   position: relative;  
    5. }  
    6.     
    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. }  
    8.     
    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. }  
    18.     
    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. }  
    28.     
    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. }  

     

     

     

    声明：
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    上一篇：display:inline、block、inline-block的区别_html/css_WEB-ITnose下一篇：Bootstrap学习js插件篇之标签页_html/css_WEB-ITnose

    相关文章

    查看更多