Rumah >hujung hadapan web >tutorial css >如何使用纯CSS3绘制26个英文字母的示例详解

如何使用纯CSS3绘制26个英文字母的示例详解

黄舟asal: 2017-07-22 10:03:462313semak imbas

纯CSS3绘制26个英文字母

在这里你看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。

网页代码中用到（09614af1b4b0fb70449f2ad0b090d674 a6d41ab4514d2e803c657e3d0aa0eb71）和p边距设置和浮动（margin:20px 5px 10px 80px; float: left;）。其中边距Margin四个像素依次代表：上右下左。

以下按字母表顺序，列出绘制26个字母的CSS。

   .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;
    }

  .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;
     }

   .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;
     }

  .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;
      }

   .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;
      }

   .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;
      }

   .G{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:84px;
        height:95px;
        border-width:15px 12px 15px 16px;
        border-color:#f0af00;
        border-style:solid;
        border-radius:50%;
       }
       .G:before{
         transform:rotate(45deg);
         position:absolute;
         content:&#39;&#39;;
         top:2px;
         left:48px;
         background-color:#ffffff;
         width:90px;
         height:90px;
       }
      .G:after{
        position:absolute;
        content:&#39;&#39;;
        bottom:0.5px;
        right:7px;
        width:28px;
        height:36px;
        border-width:13px 14px 0 0;
        border-color:#f0af00;
        border-style:solid;
      }

   .H{
        position:relative;
        margin:10px 10px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:60px;
        height:125px;
        border-width:0 16px 0 16px;
        border-color:#cde680;
        border-style:solid;
       }
       .H:before{
        position:absolute;
        content:&#39;&#39;;
        top:53px;
        left:0;
        width:60px;
        height:14px;
        background-color:#cde680;
       }

   .I{
        z-index:1;
        position:relative;
        margin:10px 10px 10px 10px;
        float: left;
        top:12.5px;
        left:20px;
        width:16px;
        height:125px;
        background-color:#020a0f;
       }

   .J{
         position:relative;
         margin:10px 5px 10px 5px;
         float: left;
         top:12.5px;
         left:-5px;
         width:75px;
         height:66px;
         border-right:solid 16px #b0c0d0;
      }
      .J:before{
         position:absolute;
         content:&#39;&#39;;
         bottom:-60px;
         right:-16px;
         width:50px;
         height:60px;
         border-width:0 16px 15px 14px;
         border-color:#b0c0d0;
         border-style:solid;
         border-radius:0 0 75%75%;
       }
       .J:after{
         transform:rotate(-40deg);
         position:absolute;
         content:&#39;&#39;;
         top:40px;
         left:-20px;
         width:60px;
         height:60px;
         background-color:#ffffff;
        }

   .K{
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:80px;
       height:125px;
       border-left:solid 16px #ce6688;
       overflow:hidden;
      }
      .K:before{
        transform:skew(-43deg,0);
        position:absolute;
        content:&#39;&#39;;
        top:0;
        left:16px;
        width:19px;
        height:84px;
        background-color:#ce6688;
      }
      .K:after{
        transform:skew(30deg,0);
        position:absolute;
        content:&#39;&#39;;
        bottom:0;
        right:25px;
        width:18px;
        height:80px;
        background-color:#ce6688;
       }

   .L{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:110px;
        border-width:0 0 15px 16px;
        border-color:#998800;
        border-style:solid;
       }

   .M{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:80px;
        height:125px;
        border-width:0 15px 0 15px;
        border-color:#ff0000;
        border-style:solid;
       }
       .M:before{
        transform:skew(20deg,0);
        position:absolute;
        content:&#39;&#39;;
        top:0;
        left:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }
       .M:after{
        transform:skew(-20deg,0);
        position:absolute;
        content:&#39;&#39;;
        top:0;
        right:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }

    .N{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:125px;
        border-width:0 15px 0 15px;
        border-color:#9aff02;
        border-style:solid;
       }
       .N:before{
        transform:skew(30deg,0);
        position:absolute;
        content:&#39;&#39;;
        top:0;
        left:24px;
        width:15px;
        height:125px;
        background-color:#9aff02;
      }

   .O{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:70px;
        height:97px;
        border-width:14px 16px 14px 16px;
        border-color:#ffff40;
        border-style:solid;
        border-radius:55% /52%;
       }

    .P{
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:60px;
       height:125px;
       border-left:solid 16px #00ffff;
      }
      .P:before{
       position:absolute;
       content:&#39;&#39;;
       width:56px;
       height:50px;
       border-width:13px 15px 13px 0;
       border-color:#00ffff;
       border-style:solid;
       border-radius:0 220%220%0 /0 180%180%0;
      }

   .Q {
       z-index:-1;
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:70px;
       height:97px;
       border-width:14px 16px 14px 16px;
       border-color:#deff00;
       border-style:solid;
       border-radius:55% /52%;
     }
     .Q:before{
       transform:rotate(-84deg);
       position:absolute;
       content:&#39;&#39;;
       top:82px;
       left:49px;
       width:16px;
       height:48px;
       border-width:16px 0 13px 13px;
       border-color:#deff00;
       border-style:solid;
       border-radius:200%0 0 200% /100%0 0 100%;
     }
     .Q:after{
       transform:rotate(-18deg);
       position:absolute;
       content:&#39;&#39;;
       bottom:-35px;
       right:-44px;
       width:30px;
       height:30px;
       background-color:#ffffff;
     }

   .R{
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     top:12.5px;
     left:10px;
     width:60px;
     height:125px;
     border-left:solid 16px #a0b0c0;
    }
    .R:before{
     position:absolute;
     content:&#39;&#39;;
     width:52px;
     height:44px;
     border-width:13px 15px 13px 0;
     border-color:#a0b0c0;
     border-style:solid;
     border-radius:0 220%220%0 /0 180%180%0;
    }
    .R:after{
     transform:skew(32deg,0);
     position:absolute;
     content:&#39;&#39;;
     bottom:0;
     left:38px;
     width:18px;
     height:58px;
     background-color:#a0b0c0;
   }

   .S{
     transform:rotate(14deg);
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     width:105px;
     height:150px;
     top:10px;
     left:10px;
   }
   .S:before{
     transform:rotate(18deg);
     position:absolute;
     content:&#39;&#39;;
     width:44px;
     height:40px;
     border-width:14px 0 15px 15.5px;
     border-color:#ffaf80;
     border-style:solid;
     border-radius:220%0 0 150% /150%0 0 100%;
   }
   .S:after{
    transform:rotate(198deg);
    position:absolute;
    content:&#39;&#39;;
    top:65px;
    left:21px;
    width:52px;
    height:44px;
    border-width:14px 0 15px 15px;
    border-color:#ffaf80;
    border-style:solid;
    border-radius:240%0 0 110% /140%0 0 100%;
    }

   .T{
      position:relative;
      margin:10px 5px 10px 5px;
      float: left;
      top:12.5px;
      left:10px;
      width:100px;
      height:125px;
      border-top:solid 15px #ffd0e0;
    }
   .T:before{
    position:absolute;
    content:&#39;&#39;;
    top:0;
    left:42px;
    width:16px;
    height:110px;
    background-color:#ffd0e0;
   }

  .U{
    position:relative;
    margin:10px 5px 10px 5px;
    float: left;
    top:12.5px;
    left:10px;
    width:60px;
    height:80px;
    border-width:0 16px 0 16px;
    border-color:#ff8f01;
    border-style:solid;
   }
   .U:before{
    position:absolute;
    content:&#39;&#39;;
    top:65px;
    left:-16px;
    width:60px;
    height:45px;
    border-width:0 16px 15px 16px;
    border-color:#ff8f01;
    border-style:solid;
    border-radius:0 0 200%200% /0 0 300%300%;
   }

  .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;
   }

   .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;
    }

  .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;
    }

  .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;
    }

  .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;
    }

完整的HTML5+CSS3版Demo。

效果截图：

CSS3绘制26个字母

Atas ialah kandungan terperinci 如何使用纯CSS3绘制26个英文字母的示例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在css定义CLASS时中间有空格和没空格的区别？Artikel seterusnya：CSS如何实现英文与连续数字自动换行的实例详解

Artikel berkaitan

Lihat lagi