首页前端开发HTML用纯css实现的html5 logo标志

用纯css实现的html5 logo标志

时间2024-01-25 12:29:21发布访客分类HTML浏览515
导读：收集整理的这篇文章主要介绍了html5教程-用纯css实现的html5 logo标志，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 一个用cs...
收集整理的这篇文章主要介绍了html5教程-用纯css实现的html5 logo标志，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

  一个用css实现的html5  LOGo，主要用htML和css技术实现，例子如下：

源代码下载地址：
css部分代码如下：


style tyPE="text/css">
html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, PRe, a, abbr, acronym, address, Big, cITe, code, del, DFn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, VAR, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-Size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
body {
    line-height: 1;
    color: black;
    background: white;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
:focus {
    outline: 0;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    margin: 40px auto 0;
    display: block;
    width: 120px;
    text-align: center;
}
.html5 {
    width:345px;
    height:385px;
    display:block;
    margin:100px auto 0;
    position:relative;
}
.html5 .icon .text .left {
    display:block;
    position:absolute;
    width:182px;
    height:400px;
}
.html5 .icon .text .left .left {
    display:block;
    position:absolute;
    width:40px;
    height:130px;
    background:#ebebeb;
    top:72px;
    left:82px;
    -webkit-transform:skew(5deg);
    -moz-transform:skew(5deg);
}
.html5 .icon .text .left .top {
    display:block;
    position:absolute;
    width:104px;
    height:40px;
    background:#ebebeb;
    top:72px;
    left:80px;
}
.html5 .icon .text .left .middle {
    display:block;
    position:absolute;
    width:96px;
    height:40px;
    background:#ebebeb;
    top:162px;
    left:88px;
}
.html5 .icon .text .left .bottom {
    display:block;
    position:absolute;
    width:85px;
    height:40px;
    background:#ebebeb;
    top:261px;
    left:102px;
-webkit-transform::rotate(12deg);
    -moz-transform:rotate(12deg);
}
.html5 .icon .text .left .vert {
    display:block;
    position:absolute;
    width:40px;
    height:70px;
    background:#ebebeb;
    top:222px;
    left:95px;
    -webkit-transform:skew(5deg);
    -moz-transform:skew(5deg);
}
.html5 .icon .text .right {
    height:400px;
    width:150px;
    left:182px;
    display:block;
    position:absolute;
    overflow:hidden;
}
.html5 .icon .text .right .top {
    display:block;
    position:absolute;
    width:105px;
    height:40px;
    background:#fff;
    top:72px;
    left:-3px;
    -webkit-transform:skew(-5deg);
    -moz-transform:skew(-5deg);
}
.html5 .icon .text .right .middle {
    display:block;
    position:absolute;
    width:80px;
    height:40px;
    background:#fff;
    top:162px;
}
.html5 .icon .text .right .right {
    display: block;
    position: absolute;
    width: 40px;
    height: 130px;
    background: #ffffff;
    top: 162px;
    left: 50px;
    -webkit-transform: skew(-5deg);
    -moz-transform: skew(-5deg);
}
.html5 .icon .text .right .bottom {
    display: block;
    position: absolute;
    width: 85px;
    height: 40px;
    background: #ffffff;
    top: 261px;
    left: -5px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}
.html5 .icon .overlay {
    height: 400px;
    width: 150px;
    left: 182px;
    position: absolute;
    display: block;
    overflow: hidden;
}
.html5 .icon .overlay .top {
    width: 160px;
    height: 300px;
    top: 28px;
    left: -35px;
    display: block;
    background: #f0652a;
    position: absolute;
    -webkit-transform: skew(-5deg);
    -moz-transform: skew(-5deg);
}
.html5 .icon .overlay .bottom {
    position:absolute;
    top:328px;
    left:-180px;
    display:block;
    border-color:#f0652a transparent transparent;
    border-style:solid;
    border-width:35px 140px 0;
    height:0px;
    margin:0 10px;
    width:0;
    font-size:0;
    line-height:0;
}
.html5 .icon .bg .middle {
    position:absolute;
    left:132px;
    background:#e44c27;
    width:50px;
    height:355px;
    display:block;
}
.html5 .icon .bg .right {
    position:absolute;
    left:166px;
    background:#e44c27;
    width:170px;
    height:350px;
    display:block;
    -webkit-transform:skew(-5deg);
    -moz-transform:skew(-5deg);
}
.html5 .icon .bg .left {
    position:absolute;
    left:24px;
    background:#e44c27;
    width:170px;
    height:350px;
    -webkit-transform:skew(5deg);
    -moz-transform:skew(5deg);
}
.html5 .icon .bg .bottom {
    position:absolute;
    top:350px;
    left:30px;
    display:block;
    border-color:#e44c27 transparent transparent;
    border-style:solid;
    border-width:35px 140px 0;
    height:0px;
    margin:0px 10px;
    width:0;
    font-size:0;
    line-height:0;
}
/style>


html代码如下

p class="html5">
  p class="icon">
    p class="bg">
      p class="right"> /p>
      p class="left"> /p>
      p class="bottom"> /p>
      p class="middle"> /p>
    /p>
    p class="overlay">
      p class="top"> /p>
      p class="bottom"> /p>
    /p>
    p class="text">
      p class="left">
        p class="top"> /p>
        p class="left"> /p>
        p class="middle"> /p>
        p class="bottom"> /p>
        p class="vert"> /p>
      /p>
      p class="right">
        p class="top"> /p>
        p class="right"> /p>
        p class="middle"> /p>
        p class="bottom"> /p>
      /p>
    /p>
  /p>
/p>

预览效果如下：

 

  一个用css实现的html5  Logo，主要用html和css技术实现，例子如下：

源代码下载地址：
css部分代码如下：


style type="text/css">
html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
body {
    line-height: 1;
    color: black;
    background: white;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
:focus {
    outline: 0;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    margin: 40px auto 0;
    display: block;
    width: 120px;
    text-align: center;
}
.html5 {
    width:345px;
    height:385px;
    display:block;
    margin:100px auto 0;
    position:relative;
}
.html5 .icon .text .left {
    display:block;
    position:absolute;
    width:182px;
    height:400px;
}
.html5 .icon .text .left .left {
    display:block;
    position:absolute;
    width:40px;
    height:130px;
    background:#ebebeb;
    top:72px;
    left:82px;
    -webkit-transform:skew(5deg);
    -moz-transform:skew(5deg);
}
.html5 .icon .text .left .top {
    display:block;
    position:absolute;
    width:104px;
    height:40px;
    background:#ebebeb;
    top:72px;
    left:80px;
}
.html5 .icon .text .left .middle {
    display:block;
    position:absolute;
    width:96px;
    height:40px;
    background:#ebebeb;
    top:162px;
    left:88px;
}
.html5 .icon .text .left .bottom {
    display:block;
    position:absolute;
    width:85px;
    height:40px;
    background:#ebebeb;
    top:261px;
    left:102px;
-webkit-transform::rotate(12deg);
    -moz-transform:rotate(12deg);
}
.html5 .icon .text .left .vert {
    display:block;
    position:absolute;
    width:40px;
    height:70px;
    background:#ebebeb;
    top:222px;
    left:95px;
    -webkit-transform:skew(5deg);
    -moz-transform:skew(5deg);
}
.html5 .icon .text .right {
    height:400px;
    width:150px;
    left:182px;
    display:block;
    position:absolute;
    overflow:hidden;
}
.html5 .icon .text .right .top {
    display:block;
    position:absolute;
    width:105px;
    height:40px;
    background:#fff;
    top:72px;
    left:-3px;
    -webkit-transform:skew(-5deg);
    -moz-transform:skew(-5deg);
}
.html5 .icon .text .right .middle {
    display:block;
    position:absolute;
    width:80px;
    height:40px;
    background:#fff;
    top:162px;
}
.html5 .icon .text .right .right {
    display: block;
    position: absolute;
    width: 40px;
    height: 130px;
    background: #ffffff;
    top: 162px;
    left: 50px;
    -webkit-transform: skew(-5deg);
    -moz-transform: skew(-5deg);
}
.html5 .icon .text .right .bottom {
    display: block;
    position: absolute;
    width: 85px;
    height: 40px;
    background: #ffffff;
    top: 261px;
    left: -5px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}
.html5 .icon .overlay {
    height: 400px;
    width: 150px;
    left: 182px;
    position: absolute;
    display: block;
    overflow: hidden;
}
.html5 .icon .overlay .top {
    width: 160px;
    height: 300px;
    top: 28px;
    left: -35px;
    display: block;
    background: #f0652a;
    position: absolute;
    -webkit-transform: skew(-5deg);
    -moz-transform: skew(-5deg);
}
.html5 .icon .overlay .bottom {
    position:absolute;
    top:328px;
    left:-180px;
    display:block;
    border-color:#f0652a transparent transparent;
    border-style:solid;
    border-width:35px 140px 0;
    height:0px;
    margin:0 10px;
    width:0;
    font-size:0;
    line-height:0;
}
.html5 .icon .bg .middle {
    position:absolute;
    left:132px;
    background:#e44c27;
    width:50px;
    height:355px;
    display:block;
}
.html5 .icon .bg .right {
    position:absolute;
    left:166px;
    background:#e44c27;
    width:170px;
    height:350px;
    display:block;
    -webkit-transform:skew(-5deg);
    -moz-transform:skew(-5deg);
}
.html5 .icon .bg .left {
    position:absolute;
    left:24px;
    background:#e44c27;
    width:170px;
    height:350px;
    -webkit-transform:skew(5deg);
    -moz-transform:skew(5deg);
}
.html5 .icon .bg .bottom {
    position:absolute;
    top:350px;
    left:30px;
    display:block;
    border-color:#e44c27 transparent transparent;
    border-style:solid;
    border-width:35px 140px 0;
    height:0px;
    margin:0px 10px;
    width:0;
    font-size:0;
    line-height:0;
}
/style>


html代码如下

p class="html5">
  p class="icon">
    p class="bg">
      p class="right"> /p>
      p class="left"> /p>
      p class="bottom"> /p>
      p class="middle"> /p>
    /p>
    p class="overlay">
      p class="top"> /p>
      p class="bottom"> /p>
    /p>
    p class="text">
      p class="left">
        p class="top"> /p>
        p class="left"> /p>
        p class="middle"> /p>
        p class="bottom"> /p>
        p class="vert"> /p>
      /p>
      p class="right">
        p class="top"> /p>
        p class="right"> /p>
        p class="middle"> /p>
        p class="bottom"> /p>
      /p>
    /p>
  /p>
/p>

预览效果如下：

 

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

ClassCSSdivHTMLhtml5letpost-format-gallery

若转载请注明出处： 用纯css实现的html5 logo标志
本文地址： https://pptw.com/jishu/586515.html
自定义App.config NameValueSectionHandler的bug修复创建自己的NameValueCollectionSectionHandler Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能

游客 回复需填写必要信息
↑