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对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 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
第五节 克隆 [5]
2006/10/09 PHP
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js opener的使用详解
2014/01/11 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
JS验证字符串功能
2017/02/22 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
jQuery extend()详解及简单实例
2017/05/06 jQuery
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python绘制热力图示例
2019/09/27 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
英文版银行求职信
2013/10/09 职场文书
物业电工岗位职责
2013/11/20 职场文书
大学活动策划书范文
2014/01/10 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python