css3绘制天猫logo实现代码


Posted in HTML / CSS onNovember 06, 2012

效果图:
css3绘制天猫logo实现代码
演示:
http://demo.3water.com/js/2012/css3/css3_tmall.html
代码:需要注意两个css文件

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="xdf@TmallUED" />
<meta name="copyright" content="dafeng.xdf@taobao.com" />
<meta name="keywords" content="CSS3 Tmall" />
<meta name="description" content="CSS3TmallLogo" />
<title>CSS3 Tmall Logo</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="style.css">
<!--source code for stylesheet path: "http://www.xdf.me/demo/css3/tmall/style.source.css" -->
</head>
<body>
<header>
<span>CSS3</span><span>Tmall</span><span>Logo</span>
</header>
<a id="tmall" href="/?p=833" target="_blank">
<i class="head">
<i class="brow"></i>
<i class="earl">
<i class="earl-left"></i>
<i class="earl-middle"></i>
<i class="earl-right"></i>
</i>
<i class="earr">
<i class="earr-left"></i>
<i class="earr-middle"></i>
<i class="earr-right"></i>
</i>
<i class="bowl">
<i class="bowl-left"></i>
<i class="bowl-right"></i>
</i>
<i class="mustache">
<i class="mustache-left-outer"></i>
<i class="mustache-left-inner"></i>
<i class="mustache-right-outer"></i>
<i class="mustache-right-inner"></i>
</i>
<i class="nose">
<i class="nose-left"></i>
<i class="nose-right"></i>
<i class="nose-bottom"></i>
<i class="nose-left-right"></i>
<i class="nose-left-bottom"></i>
<i class="nose-right-bottom"></i>
</i>
<i class="eye">
<i class="eye-inner"></i>
</i>
<i class="eye eright">
<i class="eye-inner"></i>
</i>
</i>
<i class="neck">
<i class="neck-left"></i>
<i class="neck-right"></i>
</i>
<i class="body">
<i class="arm">
<i class="arm-inner"></i>
</i>
<i class="arm2">
<i class="arm2-inner"></i>
</i>
<i class="leg">
<i class="leg-inner"></i>
</i>
<i class="leg2">
<i class="leg2-inner"></i>
</i>
</i>
</a>
</body>
</html>

原文: http://www.xdf.me/?p=833
HTML / CSS 相关文章推荐
css sprite简单实例
May 23 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 #HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 #HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 #HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 #HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 #HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 #HTML / CSS
CSS3中Color的一些特性介绍
May 27 #HTML / CSS
You might like
php微信公众号开发之图片回复
2018/10/20 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
python练习程序批量修改文件名
2014/01/16 Python
python中self原理实例分析
2015/04/30 Python
python中类的属性和方法介绍
2018/11/27 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
网络维护中文求职信
2014/01/03 职场文书
家长通知书家长评语
2014/04/17 职场文书
委托协议书范本
2014/04/22 职场文书
公司承诺书怎么写
2014/05/24 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python