一个用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代码如下

预览效果如下：

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

css做html5logo,用纯css实现的html5logo标志相关推荐

  1. html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标

    CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...

  2. [css] 能不能使用纯css使你的浏览器卡死？怎么实现？

    [css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与 ...

  3. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  4. css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放！

    使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...

  5. html做微信logo,纯CSS实现一个微信logo，需要几个标签？_html/css_WEB-ITnose

    博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用 ...

  6. html怎么做一个正方形,纯 CSS 实现自适应正方形

    在处理移动端页面时,我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果,如 Flipbord 的移动页面: 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢? 方案 ...

  7. html css字幕滚动代码,纯CSS实现滚动3D字幕

    一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法.但我还是想使用HTML和CSS来实现这样的效果. 很多年以前,在Web上实现滚动文本的动画效果一般是采用marqu ...

  8. css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  9. css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧

    写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...

  10. css加号图标_纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）...

    三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...

最新文章

  1. connect() failed (111: Connection refused) while connecting to upstream, cli
  2. 买不到口罩怎么办？Python爬虫帮你时刻盯着自动下单！| 原力计划
  3. 图像与视频合成领域的集大成者，都在这里了！
  4. 数据挖掘十大经典算法之——AdaBoost 算法
  5. Java工具类--Map集合与Java对象相互转换
  6. 计算机文档vmware安装虚拟机,教你如何用VMware虚拟机安装系统.docx
  7. JSF：直接从页面将参数传递给JSF操作方法，这是JavaEE 6+的一个不错的功能
  8. C#DateTime.ToString格式化时间字符串
  9. ora-03113 访问某条记录_用了Excel十几年，你居然不知道“记录单”？！可能错过一个亿……...
  10. Note 7会让三星有什么样的命运呢？
  11. Flex与Ruby通过socket实现通简易文本聊天
  12. PHPExcel基本使用
  13. 已移植到loongarch64的libffi源码目录
  14. 近远场转换算法matlab,计算电磁学之FDTD算法的MATLAB语言实现解析.doc
  15. SLIC 2.6：Windows Server 2022 OEM SLP 准备就绪，更新完毕
  16. 图像相似度比较之哈希算法
  17. 重装系统——最纯净的windows10系统安装方法
  18. 新浪短网址API接口的获取以及API接口的调用文档分享
  19. myeclipse如何导入外部jar包
  20. 猎豹浏览器使用评测（2）-一款很轻的极简绿色浏览器

热门文章

  1. 11. Redis数据类型底层实现 String 底层实现
  2. Access 与SQL数据类型
  3. 珠宝首饰的3D环物是如何拍摄制作出来的？
  4. 吴佳荣竟是世界首fu让人难以置信
  5. 考研数学个体户线上小作坊模式
  6. 简单html倒计时器代码,js倒计时简单实现代码
  7. linux系统重启网卡的方法步骤详解
  8. php读取mysql当前会员名称,MySQL php使用另一列获取列(使用用户名获取密码)
  9. 如何合法的利用 Python 爬虫，避免从入职到入狱
  10. N卡滤镜打开方法介绍