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 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
模仿OSO的论坛(四)
2006/10/09 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
python编写简单爬虫资料汇总
2016/03/22 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python 重定向获取真实url的方法
2018/05/11 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Django使用rest_framework写出API
2020/05/21 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
小学生节约用水倡议书
2014/05/15 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
岗位聘任报告
2015/03/02 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js