用CSS样式画会动的安卓标志

作者：andy0012018.03.01来源：Web前端之家浏览：12442评论:0

用CSS样式画安卓标志。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3画安卓标志 - Web前端之家</title>
    <style>
        *{margin: 0;padding: 0;}
        div div{
            position: relative;
            background: #A4CA39;
        }
        .android {
            height: 404px;
            width: 334px;
            margin: 100px auto;
        }
        .head{
            width: 220px;
            height: 100px;
            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;
        }
        .head:hover{
            -webkit-transform: rotate(-5deg) translate(-4px, -8px);
            transform: rotate(-5deg) translate(-4px, -8px);
            -moz-transform: rotate(-5deg) translate(-4px, -8px);
        }
        .l-angle, .r-angle{
            width: 6px;
            height: 50px;
            position: absolute;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            top: -34px;
        }
        .l-angle{
             left: 50px;
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            -moz-transform: rotate(-30deg);
        }
        .r-angle{
             right: 50px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
        }
        .l-eye, .r-eye{
            width: 20px;
            height: 20px;
            background: #ffffff;
            position: absolute;
            top: 42px;
            border-radius: 50%;
        }
        .l-eye{
            left: 50px;
        }
        .r-eye{
            right: 50px;
        }

        .body{
            width: 220px;
            height: 184px;
            top: 10px;
            border-radius: 0 0 25px 25px;
            -webkit-border-radius: 0 0 25px 25px;
            -moz-border-radius: 0 0 25px 25px;
        }
        .l-han, .r-han{
            height: 150px;
            border-radius: 25px;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
        }
        .l-han{
            left: -58px;
        }
        .r-han{
            right: -58px;
        }
        .l-han:hover{
            -webkit-transform: rotate(15deg) translate(-14px, 0);
            -transform: rotate(15deg) translate(-14px, 0);
            -moz-transform: rotate(15deg) translate(-14px, 0);
        }
        .r-han:hover{
            -webkit-transform: rotate(-30deg) translate(30px, 0);
            -transform: rotate(-30deg) translate(30px, 0);
            -moz-transform: rotate(-30deg) translate(30px, 0);
        }

        .l-han, .r-han,
        .l-foot, .r-foot{
            position: absolute;
            width: 50px;
            -webkit-transition: all 0.1s ease-in;

        }
        .l-foot, .r-foot{
            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-foot{left: 45px;}
        .r-foot{right: 45px;}

    </style>
</head>
<body>
    <!-- 
    1. 首先写出安卓标志的原型：头/身体/手/脚
    2. 给安卓添加基本样式
    3. 添加点动画
     -->
     <div class="android">
        <div class="head">
            <!-- 两个触角 -->
            <div class="l-angle"></div>
            <div class="r-angle"></div>
            <!-- 两只眼睛 -->
            <div class="l-eye"></div>
            <div class="r-eye"></div>
        </div>
        <div class="body">
            <!-- 两只手 -->
            <div class="l-han"></div>
            <div class="r-han"></div>
            <!-- 两只脚 -->
            <div class="l-foot"></div>
            <div class="r-foot"></div>
        </div>
     </div>
</body>
</html>

赏您的支持是我们创作的动力！