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

前端  /  管理员 发布于 7年前   212

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

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