你所在位置:首页html+css → 用css3实现的Android Logo

用css3实现的Android Logo

发布时间:2019-04-15

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

 
html代码如下:

<p class="android">
  <p class="head">
    <p class="l_ant"></p>
    <p class="r_ant"></p>
    <p class="l_eye"></p>
    <p class="r_eye"></p>
  </p>
  <p class="body">
    <p class="l_arm"></p>
    <p class="r_arm"></p>
    <p class="l_leg"></p>
    <p class="r_leg"></p>
  </p>
</p>


css代码如下:
* {
    margin:0;
    padding:0;
}
p p {
    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的支持性不是很好,预览的效果如下图:


 


上一篇:关于checkbox与文字混排无法对齐的解决方法
下一篇:WordPress高级自定义布局的内容编辑器模板