用css3实现的Android Logo

用纯css3无js实现的Android Logo，带有简单的动画，主要运用css3的transform,transition

源代码下载地址：http://download.csdn.net/my

html代码如下：

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中预览效果：

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

用css3实现的Android Logo相关推荐

【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
[转]android logo：内核、android开机动画
平台信息: 内核:linux2.6/linux3.0 系统:android/android 平台:S5PV310(samsungexynos4210/4412) 作者:xubin341719(欢迎转载 ...
android logo：内核、android开机动画
android logo:内核.android开机动画关键词:android 开机logo 开机动画 initlogo.rle bootanimation desc.txt 平台信息: 内核 ...
android logo：内核、android开机动画【转】
本文转载自: 关键词:Android 开机logo 开机动画 initlogo.rle bootanimation desc.txt 平台信息: 内核:linux2.6/linux3.0 系统 ...
RK3288 Android logo
一.Android 系统开机logo的修改安卓系统的开机分为u-boot logo 和 kernel logo 开机logo图片必须是 bmp 格式,并且分辨率必须为偶数将制作好的BMP格式log ...
用HTML5/CSS3/JS开发Android/IOS应用
现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...
CSS3解析抖音 LOGO制作
"抖音",人气也是非常高,据说拥有7亿用户. 今天我们就来研究研究抖音的logo,蹭蹭热度. 效果预览: 主要用css3新增属性mix-blend-mode,"组成,然后 ...
Android:logo
今天在学习的时候看到书里介绍了application的logo和icon属性,感觉书里没有讲清楚这两者,感觉这两者很像,我就立马动手试了下. 先来说下icon和logo的区别,我觉得直接上图会更容易说 ...
html修改logo,教你用CSS3打造HTML5的Logo
本文将向大家介绍如何利用CSS3的新样式属性制作一个HTML5的Logo.我们先来看看最终的效果: 不要怀疑,上面的logo完全由HTML+CSS实现.我们将logo划分为盾形.数字5和辐射背景三大部 ...

用css3实现的Android Logo

用css3实现的Android Logo相关推荐

最新文章

热门文章