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

用纯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&表达方法都有哪些gt;

<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 ea-in;

-moz-transition:all 0.1s ea-in;

-ms-transition:all 0.1s ea-in;

-o-transition:all 0.1s ea-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 ea-in;

-moz-transition:all 0.1s ea-in;

-ms-transition:all 0.1s ea-in;

-o-transition:all 0.1s ea-in;

transition:all 01s ea-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-tr不读书ansform: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的支持性不是很好，预览的效果如下图：