search

Home >Web Front-end >HTML Tutorial >CSS Card: Making playing cards with pure css_html/css_WEB-ITnose

CSS Card: Making playing cards with pure css_html/css_WEB-ITnose

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

制作扑克的html代码

 

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

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

.代码 

  1.   
  

 

 

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

就可以了。

.代码 

  1.   
  2.   

    A

      

Now always keep in mind that our purpose is not just to make a playing card, but to use it The most concise code, the html part of the code only needs so much (concise enough).

UI front-end framework carefully developed for 5 years!

css code

The first step in css is to specify the basic page properties, which will be inherited by the card.

.code

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

As shown in the above code, card The style is very simple, with a white background, rounded corners, and border shadow. There is nothing special except that the position attribute is relative.

Now let’s polish up the A letter

.code

.card p {
  1. text -align: center;
  2. font: 100px/220px Georgia, Times New Roman, serif;
  3. }

Let’s take a look at the effect first:

Now it looks like it has the effect of the card, but it always feels like there is still something missing - plum blossoms, Diamonds, hearts, spades. If we want to display these graphics without introducing pictures, things will become more complicated, but we still have tricks to solve the problem. UI front-end framework carefully developed for 5 years!

Considering that we no longer want to add more code to the html part, we introduce pseudo elements before and after to add graphics such as plum squares to the card. Fortunately, most browsers recognize various kinds of special symbols.

.code

.suitdiamonds:before, .suitdiamonds:after {
  1. content: "?";
  2. color: #ff0000;
  3. }

I use both before and after so that I can Get the upper and lower square shapes, and follow the same pattern as other shapes.

.code

.suitdiamonds:before, .suitdiamonds:after {
  1. content: "?";
  2. color: #ff0000;
  3. }
  5. .suithearts:before, .suithearts:after {
  6. content: "?";
  7. color: #ff0000;
  8. }
  10. .suitclubs:before, .suitclubs:after {
  11. content: "? ";
  12. color: #000;
  13. }
  15. .suitspades:before, .suitspades:after {
  16. content: "?";
  17. color: #000;
  18. }

If you are a If you are careful, you will notice that the direction of these diamond clubs seems to be reversed. In fact, it is easy to achieve inversion with CSS, but considering that no one will turn the screen upside down to look at this playing card, this is unnecessary.

我们画好了扑克的符号，还应该修饰大小和合适的定位。方块、梅花、红桃黑桃的字体大小位置摆放以及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.     
    7.   
        
    8.     

      A

        
    9.     
    10.       
    11.   
        
    12.     

      A

        
    13.     
    14.       
    15.   
        
    16.     

      A

        
    17.     
    18.     
    19.   
      精心开发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. }  

     

     

     

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：The difference between display:inline, block and inline-block_html/css_WEB-ITnoseNext article：The difference between display:inline, block and inline-block_html/css_WEB-ITnose

    Related articles

    See more