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

ttx9n

用纯css3无js实现的Android Logo，带有简单的动画，主要运用css3的transform,transition,结构与样式写的很清晰，一目了然，有这方面需求的朋友可以了解下哦，希望本文对你有所帮助 用纯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中预览效果：

2013012110150416.png

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

2013012110150417.png

r8st9

刷屏刷屏刷屏

6q8s6p21

的vgdsvsdvdsvdsvds

w18pvaep

呵呵呵呵呵呵

kwa3hgmjp

哈哈哈哈哈哈哈

ppwxcg

额头额定法国队是范德萨

回复用户5

天天源码社区。。。。

dm00ji1s

儿飞飞微风DVD谁vdsvd

shw5ovr

论坛有你更精彩！

mkonji

66666666666