console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 2 - Draw a animal</title>
</head>

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

</html>

* {
    margin: 0px;
}

.android {
    display: inline-block;
    background-color: whitesmoke;
    padding: 100px;
    margin: 20px;
    border: 3px solid rgb(59, 59, 59);
    border-radius: 20px;
}

.antenna>.left-ant {
    display: inline-block;
    background-color: #a4ca39;
    width: 10px;
    height: 70px;
    margin-left: 170px;
    margin-bottom: -35px;
    transform: rotate(-30deg);
    border-radius: 20px;
}

.antenna>.right-ant {
    display: inline-block;
    background-color: #a4ca39;
    width: 10px;
    height: 70px;
    margin-left: 190px;
    margin-bottom: -35px;
    transform: rotate(30deg);
    border-radius: 20px;
}

.head {
    background-color: #a4ca39;
    width: 350px;
    height: 160px;
    border-radius: 175px 175px 0px 0px;
    margin-left: 104px;
}

.head>.left-eye {
    display: inline-block;
    background-color: white;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin: 75px 85px;
}

.head>.right-eye {
    display: inline-block;
    background-color: white;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin: 75px 35px;
}

.middle {
    margin-top: 10px;
}

.middle>.middle-body {
    background-color: #a4ca39;
    display: inline-block;
    width: 350px;
    height: 300px;
    border-radius: 0px 0px 50px 50px;
}

.middle>.arm {
    background-color: #a4ca39;
    vertical-align: top;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    width: 80px;
    height: 250px;
    border-radius: 50px 50px;
    transition: all 0.4s ease-in-out;
}

.leg>.left-leg {
    margin-top: -5px;
    display: inline-block;
    background-color: #a4ca39;
    width: 80px;
    height: 120px;
    margin-left: 160px;
    border-radius: 0px 0px 40px 40px;
}

.leg>.right-leg {
    margin-top: -5px;
    display: inline-block;
    background-color: #a4ca39;
    width: 80px;
    height: 120px;
    margin-left: 70px;
    border-radius: 0px 0px 40px 40px;
}

.middle>.left-arm:hover {
    transform: rotate(30deg);
}

.middle>.right-arm:hover {
    transform: rotate(-30deg);
}