手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >纯css3无js实现的Android Logo(有简单动画)
纯css3无js实现的Android Logo(有简单动画)
摘要:用纯css3无js实现的AndroidLogo,带有简单的动画,主要运用css3的transform,transitionhtml代码如下:...

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

html代码如下:

<div>

<div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div>

<div></div>

<div></div>

<div></div>

<div></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中预览效果:

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

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

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

【纯css3无js实现的Android Logo(有简单动画)】相关文章:

纯CSS代码实现翻页

实现CSS3中的border-radius(边框圆角)示例代码

3款漂亮的CSS3 Loading动画实例教程

纯CSS结合DIV实现的右侧底部简洁悬浮效果

一款css实现的鼠标经过按钮的特效

CSS3实现的炫酷菜单代码分享

纯css实现的下拉菜单只有边框底纹用到图片

用css3仿造window7的开始菜单

一款纯css实现的垂直时间线效果

用css实现透视效果

精品推荐
分类导航