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 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 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的特殊设置
2006/10/09 PHP
php db类库进行数据库操作
2009/03/19 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
PHP的PSR规范中文版
2013/09/28 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python实现简易数码时钟
2021/02/19 Python
Python常见的pandas用法demo示例
2019/03/16 Python
简单了解Python生成器是什么
2019/07/02 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python 一维二维插值实例
2020/04/22 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
数据库专业英语
2012/11/30 面试题
军训自我鉴定200字
2014/02/13 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书