css做html5logo,用纯css实现的html5 logo标志

忘是亡心i 2022-10-07 00:41 107阅读 0赞

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

源代码下载地址：

css部分代码如下：

html, body, div, 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;

html代码如下

预览效果如下：

![ab281abdc97bacc2fbac99d6dbcdcb4c.png][]

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

css做html5logo,用纯css实现的html5 logo标志

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS3+HTML5

相关 css3/html5

相关 html 5 css,HTML 5 & CSS 3的新交互特性

相关 css做html5logo,用纯css实现的html5 logo标志

相关 html5-css样式

相关 HTML5+CSS3

相关 HTML5、CSS3

相关 HTML、CSS、HTML5、CSS3面试题

相关如何用纯 CSS 绘制一个充满动感的 Vue logo

相关 css-制作360Logo