suchen

Heim >Web-Frontend >HTML-Tutorial >CSS Card:纯css制作扑克牌_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:56:391609Durchsuche

制作扑克的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. }  

     

     

     

    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：display:inline、block、inline-block的区别_html/css_WEB-ITnoseNächster Artikel：Bootstrap学习js插件篇之标签页_html/css_WEB-ITnose

    In Verbindung stehende Artikel

    Mehr sehen