纯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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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
laravel批量生成假数据的方法
2019/10/09 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
让Vue也可以使用Redux的方法
2018/05/23 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
linux 下实现python多版本安装实践
2014/11/18 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
前台接待岗位职责
2013/12/03 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
授权收款委托书范本
2014/10/10 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
开学第一周总结
2015/07/16 职场文书
商务宴会祝酒词
2015/08/11 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
如何利用pygame实现打飞机小游戏
2021/05/30 Python