検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS カード: 純粋な css_html/css_WEB-ITnose でトランプを作成する

CSS カード: 純粋な css_html/css_WEB-ITnose でトランプを作成する

WBOY
WBOYオリジナル
2016-06-24 11:56:391608ブラウズ

制作扑克的html代码

 

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

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

.代码 

  1.   
  

 

 

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

就可以了。

.代码 

  1.   
  2.   

    A

      

ここで、私たちの目的はトランプを作成することだけではなく、最も簡潔なコードを使用することであり、HTML 部分に必要なコードはこれだけであることを常に心に留めておく必要があります (十分に単純です）。

5年間かけて慎重に開発されたUIフロントエンドフレームワーク!

css コード

CSS の最初のステップは、カードに継承される基本的なページ プロパティを指定することです。

.Code

  1. * {マージン: 0; パディング: 0;}
  2. ボディ {
  3. 背景: #00a651;
  5. .card {
  6. 位置: 相対;フロート: 左;
  7. 幅: 150 ピクセル;
  8. 背景: #fff; 3ピクセル7px rgba(0,0,0,0.3);
  9. box-shadow: 3px 3px 7px rgba(0,0,0,0.3)
  10. }
  14. 上記のコードと同じですカードのスタイルは非常にシンプルで、背景が白、角が丸く、境界線の影が付いています。位置属性が相対的であることを除いて、特別なことは何もありません。
  15. さあ、A の文字を磨きましょう
  17. .code
.card p {

text-align: font: 100px/220px Georgia, Times New Roman, serif;

まずは効果を見てみましょう:

    2. これで、カードの効果があるように見えますが、クラブ、ダイヤ、ハートなど、まだ何かが足りないように感じます。スペード。画像を導入せずにこれらのグラフィックを表示したい場合、状況はさらに複雑になりますが、問題を解決するためのトリックはまだあります。 5年かけてじっくり開発したUIフロントエンドフレームワーク！
    3. HTML 部分にこれ以上コードを追加したくないことを考慮して、カードに梅の花の四角形などのグラフィックを追加するために、前後に疑似要素を導入します。幸いなことに、ほとんどのブラウザはさまざまな種類の特殊記号を認識します。
    5. .code

.suitdiamonds:before, .suitdiamonds:after {

content: "?"

color: #ff0000;

私も前に使ってますその後、上下の正方形の形状を取得し、他の形状も同じパターンに従います。

.code

.suitdiamonds:after {

content: "?"
  1. color: #ff0000;
  2. {
  3. の内容: 「?」 ;カラー：＃ff0000;あなたは用心深い人ですから、これらのダイヤモンドのクラブの方向が逆になっているように見えることに気づいたはずです。実際、CSS を使用して反転を実現するのは非常に簡単ですが、このトランプを見るために画面を逆さまにする人はいないことを考えると、これは不要です。

    4. 我们画好了扑克的符号，还应该修饰大小和合适的定位。方块、梅花、红桃黑桃的字体大小位置摆放以及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フロントエンド框架！ ="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">.spread {

    width: 350px;  

    高さ: 250ピクセル;  

    位置: 相対的。  

    }

    .spread > .card {
      位置: 絶対;  
      2. トップ: 0;  
      3. 左: 0;  
      4. -webkit-transition: 上 0.3 秒イーズ、左 0.3 秒イーズ;  
      5. -moz-transition: 上 0.3 秒イーズ、左 0.3 秒イーズ;  
      6. -o-transition: 上 0.3 秒イーズ、左 0.3 秒イーズ。  
      7. -ms-transition: 上 0.3 秒イーズ、左 0.3 秒イーズ。  
      8. トランジション: 上 0.3 秒イーズ、左 0.3 秒イーズ。  
      9. }  
    13. 鼠标移上去的效果：
    15. .代码
    .spread:hover .suitdiamonds { -webkit-transform: rotate(-10deg);  

    -moz-transform: rotate(-10deg);  

    -o-transform: 回転(-10度);  

    -ms-transform: rotate(-10deg);  

    変換: 回転(-10度);  

    }
      2. .spread:hover .suithearts {
      3. left: 30px;  
      4. トップ: 0ピクセル;  
      5. -webkit-transform: rotate(0deg);  
      6. -moz-transform: rotate(0deg);  
      7. -o-transform: 回転(0度);  
      8. -ms-transform: rotate(0deg);  
      9. 変換: 回転(0度);  
      10. }
      12. .spread:hover .suitclubs {
      13. left: 60px;  
      14. トップ: 5ピクセル;  
      15. -webkit-transform: rotate(10deg);  
      16. -moz-transform: rotate(10deg);  
      17. -o-transform: 回転(10度);  
      18. -ms-transform: rotate(10deg);  
      19. 変換: 回転(10度);  
      20. }
      22. .spread:hover .suitspades{
      23. left: 80px;  
      24. トップ: 10ピクセル;  
      25. -webkit-transform: rotate(20deg);  
      26. -moz-transform: rotate(20deg);  
      27. -o-transform: 回転(20度);  
      28. -ms-transform: rotate(20deg);  
      29. 変換: 回転(20度);  
      30. }
      34. 再加上点阴影效果 精心开発行5年的UIフロントエンド框架！
      35. .spread > .card:hover {
      36. -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,0.4);  
      37. box-shadow: 1px 1px 7px rgba(0,0,0,0.4);  
      38. }

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：display:inline、block、inline-block_html/css_WEB-ITnose の違い次の記事：display:inline、block、inline-block_html/css_WEB-ITnose の違い

    関連記事

    続きを見る