css3写的android logo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>android</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div.head{
            margin-top: 100px;
            margin-left: 200px;
            width: 200px;
            height: 100px;
            background: greenyellow;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            position: relative;
        }
        div.head:after{
            content:"";
            position: absolute;
            top: 50px;
            left: 50px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 10px;
        }
        div.head:before{
            content:"";
            position: absolute;
            top: 50px;
            right: 50px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 10px;
        }
        div.left-ear{
            width: 10px;
            height: 50px;
            background: greenyellow;
            position: absolute;
            left: 30px;
            top: -30px;
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            -ms-transform: rotate(-30deg);
        }
        div.right-ear{
            width: 10px;
            height: 50px;
            background: greenyellow;
            position: absolute;
            right: 30px;
            top: -30px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
        }
        div.body{
            width: 200px;
            height: 200px;
            background: greenyellow;
            margin-top: 10px;
            margin-left: 200px;
            border-bottom-right-radius: 100px;
            border-bottom-left-radius: 100px;
            position: relative;
            perspective: 500px;
        }
        div.body:after{
            content:"";
            position: absolute;
            top:0;
            left: -40px;
            width: 30px;
            height: 130px;
            background: greenyellow;
            border-radius: 20px;
        }

        div.body:before{
            content:"";
            position: absolute;
            top:0;
            right: -40px;
            width: 30px;
            height: 130px;
            background: greenyellow;
            border-radius: 20px;
        }
        div.body_1{
             width: 70px;
             height: 70px;
             background: white;
             position: absolute;
             top: 40px;
             left: 77px;
            box-shadow: 0px 0px 50px #ADFF2F;
            transform: rotateY(50deg) rotate(45deg) translateY(10px);
           -webkit-transform: rotateX(50deg) rotate(45deg) translateY(10px);
           -moz-transform: rotateX(50deg) rotate(45deg) translateY(10px);
        }
        div.body_2{
             width: 50px;
             height: 50px;
             background: white;
             position: absolute;
             top: 100px;
             left: 50px;
             transform: skewY(34deg);

        }
        div.body_3{
            width: 50px;
             height: 50px;
             background: white;
             position: absolute;
             top: 100px;
             right: 40px;
             transform: skewY(-34deg);            
        }

        div.left_foot{
            width: 30px;
            height: 100px;
            background: greenyellow;
            position: absolute;
            top:150px;
            left:20px;
            border-radius: 20px;
            z-index: -1;
        }
        div.right_foot{
            width: 30px;
            height: 100px;
            background: greenyellow;
            position: absolute;
            top:150px;
            right:20px;
            border-radius: 20px;
            z-index: -1;
        }
        @-webkit-keyframes eye{
            0%   {background-color: red;}
            25%  {background-color: yellow;}
            50%  {background-color: blue;}
            100% {background-color: green;}
        }
        @keyframes eye{
            0%   {background-color: red;}
            25%  {background-color: yellow;}
            50%  {background-color: blue;}
            100% {background-color: green;}
        }
        div.body:hover{
            -webkit-animation-name: eye;
            -webkit-animation-duration: 1s;
            animation-name: eye;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;;
        }
        </style>
    </head>
    <body>
        <div class="head">
            <div class="left-ear"></div>
            <div class="right-ear"></div>
        </div>
        <div class="body">
            <div class="body_1"></div>
            <div class="body_2"></div>
            <div class="body_3"></div>
            <div class="left_foot"></div>
            <div class="right_foot"></div>
        </div>

    </body>
</html>
css3写的android logo

serendipity

引用和评论

css中应该滚瓜烂熟的属性

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式

使用flex布局解决经典布局中overflow必须设置高度才能滚动问题
