Exemple détaillé de la façon de dessiner 26 lettres anglaises en utilisant du CSS3 pur-tutoriel CSS-php.cn

Exemple détaillé de la façon de dessiner 26 lettres anglaises en utilisant du CSS3 pur

黄舟

Libérer： 2017-07-22 10:03:46

original

2307 Les gens l'ont consulté

🎜> Ici, vous voyez 26. Les lettres anglaises standard ne sont pas des polices ordinaires. Ils sont dessinés sur une page blanche en utilisant du CSS, du pur CSS. Il utilise principalement plusieurs nouvelles fonctions de transformation en CSS3 et vous devez utiliser le dernier navigateur pour l'afficher.

Utilisé dans le code Web (

) et réglage de la marge p et float (marge:20px 5px 10px 80px ; flottant : gauche ;). Les quatre pixels de la marge représentent : le haut, la droite, le bas et la gauche. Ce qui suit est une liste de CSS pour dessiner 26 lettres par ordre alphabétique.

   .A{
      position:relative;
      margin:10px 30px 10px 5px;  /*上右下左 */
      float: left;
      left:30px;
      width:60px;
      height:91px;
      border-bottom:solid 14px #0feee2;
    }
    .A:before{
      transform:skew(-19deg,0);
      position:absolute;
      content:&#39;&#39;;
      top:12.5px;
      left:0;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }
    .A:after{
      transform:skew(19deg,0);
      position:absolute;
      content:&#39;&#39;;
      top:12.5px;
      left:45px;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }

Copier après la connexion

  .B{
      position:relative;
      margin:10px 20px 10px 30px;
      float: left;
      top:12.5px;
      left:10px;
      width:60px;
      height:125px;
      border-left:solid 16px #2056cd;
    }
    .B:before{
      position:absolute;
      content:&#39;&#39;;
      width:52px;
      height:39px;
      border-width:15px 15px 10px 0;
      border-color:#2056cd;
      border-style:solid;
      border-radius:0 240%180%0 /0 180%180%0;
   }
   .B:after{
      position:absolute;
      content:&#39;&#39;;
      bottom:0;
      width:58px;
      height:43px;
      border-width:10px 15px 15px 0;
      border-color:#2056cd;
      border-style:solid;
      border-radius:0 180%220%0 /0 180%180%0;
     }

Copier après la connexion

   .C{
       position:relative;
       margin:10px 5px 10px 10px;
       float: left;
       top:12.5px;
       left:10px;
       width:84px;
       height:95px;
       border-width:15px 12px 15px 16px;
       border-color:#87adef;
       border-style:solid;
       border-radius:50%;
     }
     .C:before{
       transform:rotate(45deg);
       position:absolute;
       content:&#39;&#39;;
       top:2px;
       left:49px;
       width:90px;
       height:90px;
       background-color:#ffffff;
     }

Copier après la connexion

🎜 >

  .D{
       position:relative;
       margin:10px 20px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       border-left:solid 15px #ade081;
       height:125px;
     }
     .D:before{
       position:absolute;
       content:&#39;&#39;;
       top:0;
       left:0;
       width:60px;
       height:95px;
       border-width:15px 15px 15px 0;
       border-color:#ade081;
       border-style:solid;
       border-radius:0 300%300%0 /0 180%180%0;
      }

Copier après la connexion

🎜>

   .E{
        position:relative;
        margin:10px 10px 10px 60px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:95px;
        border-width:15px 0 15px 16px;
        border-color:#cd2388;
        border-style:solid;
      }
      .E:before{
        position:absolute;
        content:&#39;&#39;;
        top:38px;
        left:0px;
        width:53px;
        height:15px;
        background-color:#cd2388;
      }

Copier après la connexion

   .F{
        position:relative;
        margin:10px 5px 10px 10px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:110px;
        border-width:15px 0 0 16px;
        border-color:#668899;
        border-style:solid;
       }
      .F:before{
        position:absolute;
        content:&#39;&#39;;
        top:38px;
        left:0px;
        width:53px;
        height:15px;
        background-color:#668899;
      }

Copier après la connexion

  .V{
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     top:12.5px;
     left:30px;
     width:59px;
    }
    .V:before{
     transform:skew(18deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:0;
     left:0;
     height:125px;
     border-left:solid 16px #008800;
   }
   .V:after{
     transform:skew(-18deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:0;
     right:0;
     height:125px;
     border-left:solid 16px #008800;
   }

Copier après la connexion

   .W{
     position:relative;
     margin:10px 5px 10px 40px;
     float: left;
     top:12.5px;
     left:25px;
     width:100px;
    }
    .W:before{
     transform:skew(11deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:0;
     left:0;
     width:42px;
     height:125px;
     border-width:0 13px 0 15px;
     border-color:#000000;
     border-style:solid;
    }
    .W:after{
     transform:skew(-11deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:0;
     right:0;
     width:42px;
     height:125px;
     border-width:0 15px 0 13px;
     border-color:#000000;
     border-style:solid;
    }

Copier après la connexion

  .X{
     position:relative;
     margin:10px 5px 10px 25px;
     float: left;
     top:12.5px;
     left:50px;
     width:16px;
     height:125px;
    }
    .X:before{
     transform:skew(32deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:0;
     left:0;
     width:16px;
     height:125px;
     background-color:#0066ff;
    }
    .X:after{
     transform:skew(-32deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:0;
     right:0;
     width:16px;
     height:125px;
     background-color:#0066ff;
    }

Copier après la connexion

  .Y{
     position:relative;
     margin:10px 5px 10px 80px;
     float: left;
     top:92.5px;
     left:52px;
     width:16px;
     height:50px;
     background-color:#22ff55;
    }
    .Y:before{
     transform:skew(28deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:-80px;
     left:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }
    .Y:after{
     transform:skew(-28deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:-80px;
     right:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }

Copier après la connexion

  .Z{
     position:relative;
     margin:20px 5px 10px 80px;
     float: left;
     top:12.5px;
     left:10px;
     width:90px;
     height:95px;
     border-width:15px 0 15px 0;
     border-color:#336699;
     border-style:solid;
    }
    .Z:before{
     transform:skew(-37deg,0);
     position:absolute;
     content:&#39;&#39;;
     top:0;
     left:36px;
     width:18px;
     height:95px;
     background-color:#336699;
    }

Copier après la connexion

完整的HTML5+CSS3版Demo。

效果截图：