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教程(9):设置RGB颜色
Apr 02 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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 遍历文件实现代码
2011/05/04 PHP
php写的简易聊天室代码
2011/06/04 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
Python实现的端口扫描功能示例
2018/04/08 Python
python中提高pip install速度
2020/02/14 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
春节活动策划方案
2014/01/24 职场文书
学前教育专业求职信
2014/09/02 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
党建工作整改措施
2014/10/28 职场文书
校园新闻稿范文
2015/07/18 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript