android录音动画css,纯css3无js实现的Android Logo(有简单动画)

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

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的支持性不是很好，预览的效果如下图：