首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

用CSS3打造HTML5的Logo(实现代码)

Posted in HTML / CSS onJune 16, 2016

本文将向大家介绍如何利用CSS3的新样式属性制作一个HTML5的Logo。我们先来看看最终的效果：

用CSS3打造HTML5的Logo(实现代码)

不要怀疑，上面的logo完全由HTML+CSS实现。我们将logo划分为盾形、数字5和辐射背景三大部分，下面将分别实现每个部分。

盾形

盾形在外形上是左右对称的，因此我们可先完成左半边，右半边可复制过来再修改一些参数。左半边准备用三个div实现，其中有两个div需要倾斜一定的角度来实现盾形的左边和底边，这里使用transform的skew来完成。代码如下（注意，这里只使用了webkit前缀的样式，仅在Chrome、Safari等Webkit内核浏览器支持）：

XML/HTML Code复制内容到剪贴板
  1. <!-- left side -->  
  2. <div class="dark_orange" style="left:32px;width:140px;height:346px;"></div>  
  3. <div class="dark_orange" style="-webkit-transform:skewx(5deg);left:16px;width:100px;height:346px;"></div>  
  4. <div class="dark_orange" style="-webkit-transform:skewy(15deg);top:265px;left:32px;width:140px;height:100px;"></div>  

其中，CSS样式定义所有div都是绝对定位，dark_orange类指定了一个橘色背景：

 

div{position:absolute}
.dark_orange{background:#e15016}

 

我们看一下效果：

用CSS3打造HTML5的Logo(实现代码)

下面我们再复制一遍HTML，修改一些参数作为盾形的右侧：

 

XML/HTML Code复制内容到剪贴板
  1. <!-- right side -->  
  2. <div class="dark_orange" style="left:172px;width:140px;height:346px;"></div>  
  3. <div class="dark_orange" style="-webkit-transform:skewx(-5deg);left:227px;width:100px;height:346px;"></div>  
  4. <div class="dark_orange" style="-webkit-transform:skewy(-15deg);top:265px;left:172px;width:140px;height:100px;"></div>  

效果如下：

用CSS3打造HTML5的Logo(实现代码)

盾形的右侧里面有浅色的区域，我们将盾的右侧复制一份通过scale缩小一点，此外还需要调整一些样式属性：

XML/HTML Code复制内容到剪贴板
  1. <!-- inner -->  
  2. <div style="-webkit-transform:scale(0.82);left:31px;top:25px">  
  3. <div class="light_orange" style="left:172px;width:140px;height:346px;"></div>  
  4. <div class="light_orange" style="-webkit-transform:skewx(-5deg);left:227px;width:100px;height:363px;"></div>  
  5. <div class="light_orange" style="-webkit-transform:skewy(-15deg);top:282px;left:172px;width:138px;height:100px;"></div>  
  6. </div>  

light_orange对应浅一点儿的背景色：

 

.light_orange{background:#ee6812}

 

盾形已经完成了：

用CSS3打造HTML5的Logo(实现代码)

数字5

数字5由若干div组成，倾斜的效果依旧通过skew来控制：

XML/HTML Code复制内容到剪贴板
  1. <!-- 5 -->  
  2. <div class="light_gray" style="height:43px;width:102px;left:70px;top:70px"></div>  
  3. <div class="light_gray" style="width:46px;height:216px;-webkit-transform:skewx(5deg);top:70px;left:75px;"></div>  
  4. <div class="light_gray" style="height:43px;width:95px;left:77px;top:156px"></div>  
  5. <div class="light_gray" style="height:47px;width:87px;left:85px;top:251px;-webkit-transform:skewy(15deg)"></div>  
  6.   
  7. <div class="white" style="height:43px;width:102px;left:172px;top:70px"></div>  
  8. <div class="white" style="width:46px;height:216px;-webkit-transform:skewx(-5deg);top:70px;left:223px;"></div>  
  9. <div class="white" style="height:43px;width:95px;left:172px;top:156px"></div>  
  10. <div class="white" style="height:47px;width:87px;left:172px;top:251px;-webkit-transform:skewy(-15deg)"></div>  

light_gray类和white类对应的样式：

 

.light_gray{background:#ebebeb}
.white{background:#fff}

 

我们看到如下效果：

用CSS3打造HTML5的Logo(实现代码)

为了最终实现数字5，我们需要在两个位置打两个“补丁”：

XML/HTML Code复制内容到剪贴板
  1. <!-- patch -->  
  2. <div class="dark_orange" style="height:20px;top:199px;width:80px;left:60px;"></div>  
  3. <div class="light_orange" style="height:43px;top:113px;width:100px;left:180px;"></div>  

最终效果：

用CSS3打造HTML5的Logo(实现代码)

辐射背景

辐射背景主要使用rotate来完成，这里我贴出完整的代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. <title>HTML5 logo</title>  
  6. <style>  
  7. div{position:absolute}   
  8. .dark_orange{background:#e15016}   
  9. .light_orange{background:#ee6812}   
  10. .light_gray{background:#ebebeb}   
  11. .white{background:#fff}   
  12. .beam{width:1600px;height:20px;-webkit-transform-origin:800 10;top:290px;left:-400px}   
  13. </style>  
  14. </head>  
  15. <body style="margin:0;padding:0">  
  16. <div class="bg" style="width:800px;height:600px;background:#f2f2f2;overflow:hidden">  
  17.   
  18. <div class="white beam" style="-webkit-transform:rotate(5deg)"></div>  
  19. <div class="white beam" style="-webkit-transform:rotate(15deg)"></div>  
  20. <div class="white beam" style="-webkit-transform:rotate(25deg)"></div>  
  21. <div class="white beam" style="-webkit-transform:rotate(35deg)"></div>  
  22. <div class="white beam" style="-webkit-transform:rotate(45deg)"></div>  
  23. <div class="white beam" style="-webkit-transform:rotate(55deg)"></div>  
  24. <div class="white beam" style="-webkit-transform:rotate(65deg)"></div>  
  25. <div class="white beam" style="-webkit-transform:rotate(75deg)"></div>  
  26. <div class="white beam" style="-webkit-transform:rotate(85deg)"></div>  
  27. <div class="white beam" style="-webkit-transform:rotate(95deg)"></div>  
  28. <div class="white beam" style="-webkit-transform:rotate(105deg)"></div>  
  29. <div class="white beam" style="-webkit-transform:rotate(115deg)"></div>  
  30. <div class="white beam" style="-webkit-transform:rotate(125deg)"></div>  
  31. <div class="white beam" style="-webkit-transform:rotate(135deg)"></div>  
  32. <div class="white beam" style="-webkit-transform:rotate(145deg)"></div>  
  33. <div class="white beam" style="-webkit-transform:rotate(155deg)"></div>  
  34. <div class="white beam" style="-webkit-transform:rotate(165deg)"></div>  
  35. <div class="white beam" style="-webkit-transform:rotate(175deg)"></div>  
  36.   
  37.   
  38.   
  39. <div class="logo" style="top:120px;left:229px;">  
  40. <!-- left side -->  
  41. <div class="dark_orange" style="left:32px;width:140px;height:346px;"></div>  
  42. <div class="dark_orange" style="-webkit-transform:skewx(5deg);left:16px;width:100px;height:346px;"></div>  
  43. <div class="dark_orange" style="-webkit-transform:skewy(15deg);top:265px;left:32px;width:140px;height:100px;"></div>  
  44. <!-- right side -->  
  45. <div class="dark_orange" style="left:172px;width:140px;height:346px;"></div>  
  46. <div class="dark_orange" style="-webkit-transform:skewx(-5deg);left:227px;width:100px;height:346px;"></div>  
  47. <div class="dark_orange" style="-webkit-transform:skewy(-15deg);top:265px;left:172px;width:140px;height:100px;"></div>  
  48. <!-- inner -->  
  49. <div style="-webkit-transform:scale(0.82);left:31px;top:25px">  
  50. <div class="light_orange" style="left:172px;width:140px;height:346px;"></div>  
  51. <div class="light_orange" style="-webkit-transform:skewx(-5deg);left:227px;width:100px;height:363px;"></div>  
  52. <div class="light_orange" style="-webkit-transform:skewy(-15deg);top:282px;left:172px;width:138px;height:100px;"></div>  
  53. </div>  
  54. <!-- 5 -->  
  55. <div class="light_gray" style="height:43px;width:102px;left:70px;top:70px"></div>  
  56. <div class="light_gray" style="width:46px;height:216px;-webkit-transform:skewx(5deg);top:70px;left:75px;"></div>  
  57. <div class="light_gray" style="height:43px;width:95px;left:77px;top:156px"></div>  
  58. <div class="light_gray" style="height:47px;width:87px;left:85px;top:251px;-webkit-transform:skewy(15deg)"></div>  
  59.   
  60. <div class="white" style="height:43px;width:102px;left:172px;top:70px"></div>  
  61. <div class="white" style="width:46px;height:216px;-webkit-transform:skewx(-5deg);top:70px;left:223px;"></div>  
  62. <div class="white" style="height:43px;width:95px;left:172px;top:156px"></div>  
  63. <div class="white" style="height:47px;width:87px;left:172px;top:251px;-webkit-transform:skewy(-15deg)"></div>  
  64. <!-- patch -->  
  65. <div class="dark_orange" style="height:20px;top:199px;width:80px;left:60px;"></div>  
  66. <div class="light_orange" style="height:43px;top:113px;width:100px;left:180px;"></div>  
  67. </div>  
  68. <!-- end of logo -->  
  69. </div>  
  70. <!-- end of bg -->  
  71. </body>  
  72. </html>  

HTML5的logo已经完成了！

用CSS3打造HTML5的Logo(实现代码)

以上就是小编为大家带来的用CSS3打造HTML5的Logo(实现代码)的全部内容了，希望大家多多支持脚步之家。

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/06/16/5589780.html

用CSS3打造HTML5的Logo(实现代码)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5边玩边学（1）画布实现方法
Sep 21 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 #HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 #HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 #HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 #HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 #HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 #HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 #HTML / CSS
OpenLayer(1) Spring-Retry(1) Sqlite(2) 多维数组(1) Spring Boot(5) IDEA(2) Fragment(1) 多线程(6) ICF-5900W(2) EventBus(1)
You might like
smarty模板中拼接字符串的方法
2014/02/14 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
详解vue使用vue-layer-mobile组件实现toast，loading效果
2018/08/31 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
SmartBuyGlasses荷兰：购买太阳镜和眼镜
2020/03/16 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
上班上网检讨书
2014/01/29 职场文书
新春联欢会主持词
2014/03/24 职场文书
励志演讲稿范文
2014/04/29 职场文书
星级党支部申报材料
2014/05/31 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
Django drf请求模块源码解析
2021/06/08 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL