css3绘制天猫logo实现代码
2012-11-06 17:44
731 查看
效果图:
演示:
http://demo.jb51.net/js/2012/css3/css3_tmall.html
代码:需要注意两个css文件
原文: http://www.xdf.me/?p=833
演示:
http://demo.jb51.net/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
相关文章推荐
- CSS3 绘制BMW logo实的现代码
- CSS3-使用纯css绘制天猫logo
- 纯CSS3实现绘制各种图形实现代码详细整理
- 用CSS3打造HTML5的Logo(实现代码)
- css3简单练习实现遨游浏览器logo的绘制
- CSS3绘制六边形的简单实现
- 利用CSS3实现平移动画效果示例代码
- 纯CSS3代码实现滑动开关效果
- css3绘制腾讯logo
- 实现CSS3中的border-radius(边框圆角)示例代码
- 简单CSS3代码实现立方体以及3D骰子
- 一款纯css3实现的颜色渐变按钮的代码教程
- CSS3实现文字波浪线效果示例代码
- android 代码绘制转盘抽奖的实现
- css3实现的简单开关按钮代码实例:
- 用CSS3实现无图片的百度Logo
- 如何使用HTML5+CSS3绘制一个QQ 企鹅Logo
- Fragment中的Toolbar使用与处理,以及toobar在Java代码实现添加logo图片和文字
- CSS3绘制三角形,并实现翻转效果
- 通过css3实现的动画导航菜单代码