12 - CSS3 - 边框圆角 - 安卓机器猫

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

< ! ---------- HTML ----------- >

<div class="android">
    <div class="head">
        <div class="head-left-eye"></div>
        <div class="head-right-eye"></div>
        <div class="head-left-ant"></div>
        <div class="head-right-ant"></div>
    </div>
    <div class="body">
        <div class="body-left-arm"></div>
        <div class="body-right-arm"></div>
        <div class="body-left-leg"></div>
        <div class="body-right-leg"></div>
    </div>
</div>

< ! --------- Style --------------- >

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .android{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        margin: 100px auto;
        position: relative;
    }
    .android .head{
        width: 200px;
        height: 100px;
        background-color: #a3c939;
        position: absolute;
        left: 50%;
        margin-left:-100px;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    }
    .android .head .head-left-eye{
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        left: 50px;
        top: 50px;
    }
    .android .head .head-right-eye{
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        right: 50px;
        top: 50px;
    }
    .android .head .head-left-ant{
        width: 10px;
        height: 50px;
        background-color: #a3c939;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        position: absolute;
        left: 40px;
        top: -35px;
        transform: rotateZ(-30deg);
    }
    .android .head .head-right-ant{
        width: 10px;
        height: 50px;
        background-color: #a3c939;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        position: absolute;
        right: 40px;
        top: -35px;
        transform: rotateZ(30deg);
    }
    .android .body{
        width: 200px;
        height: 220px;
        background-color: #a3c939;
        position: absolute;
        left: 50%;
        margin-left:-100px;
        top: 110px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .android .body .body-left-arm{
        width: 40px;
        height: 200px;
        background-color: #a3c939;
        border-radius: 20px/20px;
        position: absolute;
        top: 0;
        left: -50px;
    }
    .android .body .body-right-arm{
        width: 40px;
        height: 200px;
        background-color: #a3c939;
        border-radius: 20px/20px;
        position: absolute;
        top: 0;
        right: -50px;
    }
    .android .body .body-left-leg{
        width: 50px;
        height: 100px;
        background-color: #a3c939;
        border-radius: 25px/25px;
        position: absolute;
        left: 30px;
        bottom: -70px;
    }
    .android .body .body-right-leg{
        width: 50px;
        height: 100px;
        background-color: #a3c939;
        border-radius: 25px/25px;
        position: absolute;
        right: 30px;
        bottom: -70px;
    }
    .android .head:hover{
        transform: rotateZ(-10deg);
        transform-origin: left bottom;
    }
    .android .body:hover .body-left-arm{
        transform: rotateZ(180deg);
        transform-origin: 20px 50px;
    }
</style>

< ! --------- 效果展示 ---------- >

**机器猫**