[分享]css3写的android logo

风轻yLv.1种子选手
2024-09-17 20:52:57
<!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>
风轻y

34 天前
签名 : 43 0
免责声明 : 用户发表言论，签名内容均为会员个人观点，并不代表花趣站长网立场！