哆啦A梦机器猫

最新推荐文章于 2024-08-17 14:58:02 发布
小杨不会编程(っ◞‸◟c)
最新推荐文章于 2024-08-17 14:58:02 发布
阅读量714
点赞数
文章标签： html5 css html css3
本文链接：https://blog.csdn.net/weixin_47263611/article/details/123612020
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机器猫</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    .nav {
        width: 400px;
        height: 600px;
        margin: 100px auto;
        /* border: 1px solid black; */
    }

    /* 脑袋 */
    .head {
        width: 250px;
        height: 250px;
        border: 1px solid black;
        background-color: rgb(7, 133, 230);
        border-radius: 50%;
        position: relative;
        margin: auto;
    }

    .head>.head1 {
        width: 240px;
        height: 210px;
        border: 1px solid black;
        background-color: white;
        position: absolute;
        left: 5px;
        top: 38px;
        border-radius: 50% 50% 51% 49%;
    }

    /* 眼睛 */
    .eye1,
    .eye2 {
        width: 60px;
        height: 70px;
        border: 1px solid black;
        border-radius: 50%;
        position: absolute;
        background-color: white;
        left: 122px;
        top: 20px;
    }

    .eye2 {
        left: 62px;
        top: 20px;
    }

    .eye3,
    .eye4 {
        width: 30px;
        height: 40px;
        border: 1px solid black;
        border-radius: 50%;
        position: absolute;
        background-color: rgb(31, 30, 29);
        left: 137px;
        top: 48px;
    }

    .eye4 {
        left: 84px;
        top: 48px;
    }

    .eye5,
    .eye6 {
        width: 8px;
        height: 12px;
        border: 1px solid black;
        border-radius: 50%;
        position: absolute;
        background-color: rgb(244, 244, 248);
        left: 153px;
        top: 66px;
    }

    .eye6 {
        left: 100px;
        top: 66px;
    }

    /* 鼻子 */
    .nose {
        position: relative;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: rgb(182, 50, 40);
        left: 107px;
        top: 70px;
    }

    .nose1 {
        width: 9px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
        position: absolute;
        left: 11px;
        top: 12px;
    }

    /* 嘴巴 */
    .mouth {
        width: 175px;
        height: 95px;
        border: 1px solid black;
        border-top-color: transparent;
        position: absolute;
        border-radius: 0px 0px 90px 90px;
        left: 36px;
        top: 100px;
    }

    /* 胡须 */
    .hu1,
    .hu2,
    .hu3,
    .hu4,
    .hu5,
    .hu6,
    .hu7 {
        width: 80px;
        border-top: 1px solid black;
        position: absolute;
    }

    .hu1 {
        left: 20px;
        top: 100px;
        transform: rotate(25deg);
    }

    .hu2 {
        left: 20px;
        top: 140px;
    }

    .hu3 {
        left: 20px;
        top: 180px;
        transform: rotate(-25deg);
    }

    .hu4 {
        left: 150px;
        top: 100px;
        transform: rotate(-25deg);
    }

    .hu5 {
        left: 150px;
        top: 140px;
    }

    .hu6 {
        left: 150px;
        top: 180px;
        transform: rotate(25deg);
    }

    .hu7 {
        border-width: 3px;
        width: 90px;
        left: 31%;
        top: 60%;
        transform: rotate(90deg);
    }

    /* 食物 */
    .food {
        width: 120px;
        /* height: 200px; */
        /* border: 1px solid black; */
        position: relative;
        left: 138px;
        top: -234px;
        /* box-sizing: 3; */
    }

    .food1,
    .food2,
    .food3 {
        position: absolute;
        border: 1px solid black;
    }

    .food1 {
        width: 120px;
        height: 90px;
        border-radius: 50%;

        background-color: rgb(239, 236, 205);
    }

    .food2 {
        width: 120px;
        height: 80px;
        border-radius: 50%;
        background-color: rgb(239, 236, 205);

    }

    .food3 {
        width: 120px;
        height: 70px;
        border-radius: 50%;
        background-color: rgb(188, 87, 57);
    }

    /* 身体 */
    .body {
        width: 160px;
        height: 170px;
        background-color: rgb(7, 133, 230);
        position: relative;
        left: 120px;
        top: -10px;
    }

    .cont {
        width: 100%;
        height: 90%;
        border-radius: 50%;
        background-color: aliceblue;
        border: 1px solid black;
    }

    /* 左右手躯干 */
    .left,
    .nigth {
        width: 80px;
        height: 55px;
        border-radius: 50%;
        background-color: rgb(7, 133, 230);
        position: absolute;
        border: 1px solid black;
    }

    .left {
        left: -55px;
        top: 8px;
        transform: rotate(-45deg);
    }

    .nigth {
        left: 122px;
        top: 8px;
        transform: rotate(45deg);
    }

    /* 左右手 */
    .left1,
    .nigth1 {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: wheat;
        border: 1px solid black;
        position: absolute;
    }

    .left1 {
        top: -36px;
        left: -15px;
        z-index: 1;
    }

    .nigth1 {
        top: -34px;
        left: 108px;
        z-index: 1;
    }

    /* 双脚 */

    .foot1,
    .foot2 {
        width: 110px;
        height: 130px;
        border-radius: 50%;
        background-color: rgb(226, 231, 236);
        border: 1px solid black;
        position: absolute;
        z-index: 1;
    }

    .foot1 {
        top: 49px;
        left: -74px;

    }

    .foot2 {
        top: 49px;
        left: 100px;

    }

    /* 口袋 */
    .kodai {
        width: 100px;
        height: 60px;
        border: 1px solid black;
        position: relative;
        border-radius: 0px 0px 90px 90px;
        left: 140px;
        top: -110px;
    }
</style>

<body>
    <!-- 脑袋 -->
    <div class="nav">
        <div class="head">
            <!-- 眼睛 -->
            <div class="head1"></div>
            <div class="eye1"></div>
            <div class="eye2"></div>
            <div class="eye3"></div>
            <div class="eye4"></div>
            <div class="eye5"></div>
            <div class="eye6"></div>
            <!-- 鼻子 -->
            <div class="nose">
                <div class="nose1"></div>
            </div>
            <!-- 嘴巴 -->
            <div class="mouth"></div>
            <!-- 胡子 -->
            <div class="hu1"></div>
            <div class="hu2"></div>
            <div class="hu3"></div>
            <div class="hu4"></div>
            <div class="hu5"></div>
            <div class="hu6"></div>
            <div class="hu7"></div>
        </div>
        <!-- 身体 -->
        <div class="body">
            <div class="cont"></div>
            <div class="duzi"></div>
            <!-- 左右手躯干 -->
            <div class="left"></div>
            <div class="nigth"></div>
            <!-- 左右手 -->
            <div class="left1"></div>
            <div class="nigth1"></div>
            <!-- 脚 -->
            <div class="foot1"></div>
            <div class="foot2"></div>

        </div>
        <!-- 食物-->
        <div class="food">
            <div class="food1"></div>
            <div class="food2"></div>
            <div class="food3"></div>
        </div>
        <!-- 口袋 -->
        <div class="kodai"></div>
    </div>
</body>

</html>