纯css3无js完成的Android Logo(有简易动漫)

日期:2021-03-10 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

用纯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:⑶4px;
border-radius:3px;
}
.l_ant {
left:50px;
-webkit-transform:rotate(⑶0deg);
-moz-transform:rotate(⑶0deg);
-ms-transform:rotate(⑶0deg);
-o-transform:rotate(⑶0deg);
transform:rotate(⑶0deg);
}
.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: ⑸8px;
}
.r_arm {
right: ⑸8px;
}
.l_leg {
left: 45px;
}
.r_leg {
right: 45px;
}
.head:hover{
-webkit-transform:rotate(⑸deg) translate(⑷px,⑻px);
-moz-transform:rotate(⑸deg) translate(⑷px,⑻px);
-ms-transform:rotate(⑸deg) translate(⑷px,⑻px);
-o-transform:rotate(⑸deg) translate(⑷px,⑻px);
transform:rotate(⑸deg) translate(⑷px,⑻px);
}
.l_arm:hover{
-webkit-transform:rotate(15deg) translate(⑴4px,0);
-moz-transform:rotate(15deg) translate(⑴4px,0);
-ms-transform:rotate(15deg) translate(⑴4px,0);
-o-transform:rotate(15deg) translate(⑴4px,0);
transform:rotate(15deg) translate(⑴4px,0);
}
.r_arm:hover{-webkit-transform:rotate(⑶0deg) translate(30px,0);
-moz-transform:rotate(⑶0deg) translate(30px,0);
-ms-transform:rotate(⑶0deg) translate(30px,0);
-o-transform:rotate(⑶0deg) translate(30px,0);
transform:rotate(⑶0deg) translate(30px,0);
}

预览实际效果图,在firefox,chrome,opera,ie9中预览实际效果


在ie6,ie7,ie8中针对css3的适用性并不是很好,预览的实际效果以下图:


上一篇:用css border完成尖3角的写法(无照片) 返回下一篇:没有了