css3 Android Logo

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3 Android Logo 的示例演示效果:

当前平台(PC电脑)

平台:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link href="css/zzsc.css" rel="stylesheet" type="text/css" />
    <title>css3 Android Logo</title>
</head>
<body>
    <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>
</body>
</html>

CSS代码(zzsc.css):

div{margin:o;padding:0;}
div div{background:#A4CA39;position:relative;}
.android{height:404px;width:334px;margin:100px auto;}
.head{width:220px;height:100px;top:32px;border-radius:110px 110px 0 0;-moz-border-radius:110px 110px 0 0;-webkit-border-radius:110px 110px 0 0;-webkit-transition:all 0.1s ease-in;}
.l_eye,.r_eye{background:#fff;width:20px;height:20px;position:absolute;top:42px;border-radius:10px;-moz-border-radius:10px;-webkit-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;-webkit-border-radius:3px;-moz-border-radius:3px;}
.l_ant{left:50px;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);}
.r_ant{right:50px;transform:rotate(30deg);-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);}
.body{width:220px;height:184px;top:40px;border-radius:0 0 25px 25px;-webkit-border-radius:0 0 25px 25px;-moz-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;}
.l_arm,.r_arm{height:150px;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;}
.l_leg,.r_leg{height:80px;top:182px;border-radius:0 0 25px 25px;-moz-border-radius:0 0 25px 25px;-webkit-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);-transform:rotate(-5deg) translate(-4px,-8px);-moz-transform:rotate(-5deg) translate(-4px,-8px);}
.l_arm:hover{-webkit-transform:rotate(15deg) translate(-14px,0);-transform:rotate(15deg) translate(-14px,0);-moz-transform:rotate(15deg) translate(-14px,0);}
.r_arm:hover{-webkit-transform:rotate(-30deg) translate(30px,0);-transform:rotate(-30deg) translate(30px,0);-moz-transform:rotate(-30deg) translate(30px,0);}

附件:下载该文件资源,减少时间成本(增值服务)