纯css3无js实现的Android Logo(有简单动画)


Posted in HTML / CSS onJanuary 21, 2013

用纯css3无js实现的Android Logo,带有简单的动画,主要运用css3的transform,transition
html代码如下

复制代码
代码如下:

<div class="android">
<div class="head">
<div class="l_ant"></div>
<div class="r_ant"></div>
<div class="l_eye"></div>
<div class="r_eye"></div>
</div>
<div class="body">
<div class="l_arm"></div>
<div class="r_arm"></div>
<div class="l_leg"></div>
<div class="r_leg"></div>
</div>
</div>

css代码如下
复制代码
代码如下:

* {
margin:0;
padding:0;
}
div div {
background:#a4ca39;
position:relative;
}
.android {
width:404px;
height:334px;
margin:100px auto;
}
.head {
width:220px;
height:110px;
top:32px;
border-radius:110px 110px 0 0;
-webkit-transition:all 0.1s ease-in;
-moz-transition:all 0.1s ease-in;
-ms-transition:all 0.1s ease-in;
-o-transition:all 0.1s ease-in;
}
.l_eye, .r_eye {
background:#fff;
width:20px;
height:20px;
position:absolute;
top:42px;
border-radius:10px;
}
.l_eye {
left:50px;
}
.r_eye {
right:50px;
}
.l_ant, .r_ant {
width:6px;
height:50px;
position:absolute;
top:-34px;
border-radius:3px;
}
.l_ant {
left:50px;
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
transform:rotate(-30deg);
}
.r_ant {
right:50px;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.body {
width:220px;
height:184px;
top:40px;
border-radius:0 0 25px 25px;
}
.l_arm, .r_arm, .l_leg, .r_leg {
width: 50px;
position: absolute;
-webkit-transition: all 0.1s ease-in;
-moz-transition:all 0.1s ease-in;
-ms-transition:all 0.1s ease-in;
-o-transition:all 0.1s ease-in;
transition:all 01s ease-in;
}
.l_arm, .r_arm {
height: 150px;
border-radius: 25px;
}
.l_leg, .r_leg {
height:80px;
top:182px;
border-radius:0 0 25px 25px;
}
.l_arm {
left: -58px;
}
.r_arm {
right: -58px;
}
.l_leg {
left: 45px;
}
.r_leg {
right: 45px;
}
.head:hover{
-webkit-transform:rotate(-5deg) translate(-4px,-8px);
-moz-transform:rotate(-5deg) translate(-4px,-8px);
-ms-transform:rotate(-5deg) translate(-4px,-8px);
-o-transform:rotate(-5deg) translate(-4px,-8px);
transform:rotate(-5deg) translate(-4px,-8px);
}
.l_arm:hover{
-webkit-transform:rotate(15deg) translate(-14px,0);
-moz-transform:rotate(15deg) translate(-14px,0);
-ms-transform:rotate(15deg) translate(-14px,0);
-o-transform:rotate(15deg) translate(-14px,0);
transform:rotate(15deg) translate(-14px,0);
}
.r_arm:hover{-webkit-transform:rotate(-30deg) translate(30px,0);
-moz-transform:rotate(-30deg) translate(30px,0);
-ms-transform:rotate(-30deg) translate(30px,0);
-o-transform:rotate(-30deg) translate(30px,0);
transform:rotate(-30deg) translate(30px,0);
}

预览效果图,在firefox,chrome,opera,ie9中预览效果

纯css3无js实现的Android Logo(有简单动画)

在ie6,ie7,ie8中对于css3的支持性不是很好,预览的效果如下图:

纯css3无js实现的Android Logo(有简单动画)

HTML / CSS 相关文章推荐
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 #HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 #HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 #HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 #HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 #HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 #HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 #HTML / CSS
You might like
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python生成器generator用法示例
2018/08/10 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python实现弹窗祝福效果
2019/04/07 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
教研处工作方案
2014/05/26 职场文书
民生工作实施方案
2014/05/31 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2014年物流工作总结
2014/11/25 职场文书
拖欠货款起诉状
2015/05/20 职场文书
如何写观后感
2015/06/19 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js