小黄人

效果：
代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>制作小黄人</title>
        <style>
            /* 设定小黄人容器 */
                .wrap{
                    width: 400px;
                    height: 600px;
                    margin: 0 auto;
                    border: 1px solid red;
                    position: relative;
                }
                /* 设定小黄人身体 */
                .xhr_body{
                    width: 250px;
                    height: 400px;
                    border: 5px solid #000;
                    border-radius: 125px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background: yellow;
                    overflow: hidden;
                }
                /* 设定小黄人头发 */
                .xhr_hair_1, .xhr_hair_2 {
                    width: 130px;
                    height: 100px;
                    border-top: 10px solid #000;
                    border-radius: 50%;
                    position: absolute;
                }
                .xhr_hair_1 {
                    left: 100px;
                    top: 80px;
                    transform: rotate(48deg); /* 旋转40°*/
                }
                .xhr_hair_2 {
                    left: 102px;
                    top: 70px;
                    transform: rotate(48deg);
                }
                /* 设定小黄人手臂 */
                .xhr_hand_l, .xhr_hand_r{
                    width: 100px;
                    height: 100px;
                    border: 5px solid #000;
                    position: absolute;
                    border-radius: 30px;
                    background: yellow;
                    z-index: -1;
                }
                .xhr_hand_l{
                    left: 48px;
                    top: 300px;
                    transform: rotate(30deg);
                }
                .xhr_hand_r{
                    right: 48px;
                    top: 300px;
                    transform: rotate(-30deg);
                }
                .xhr_hand_l::after, .xhr_hand_r::after{
                    content: "";
                    width: 30px;
                    height: 15px;
                    background: #000;
                    position: absolute;
                    border-radius: 5px;
                }
                .xhr_hand_l::after{
                    left: 10px;
                    top: 60px;
                    transform: rotate(-90deg);
                }
                .xhr_hand_r::after{
                    right: 10px;
                    top: 60px;
                    transform: rotate(90deg);
                }
                /* 制作小黄人的腿 */
                .xhr_foot_l, .xhr_foot_r{
                    width: 40px;
                    height: 90px;
                    background: #000;
                    position: absolute;
                    z-index: -1;
                }
                .xhr_foot_l{
                    left: 155px;
                    bottom: 48px;
                }
                .xhr_foot_r{
                    right: 155px;
                    bottom: 48px;
                }
                .xhr_foot_l::after, .xhr_foot_r::after{
                    content: "";
                    width: 60px;
                    height: 40px;
                    background: #000;
                    border-radius: 20px;
                    position: absolute;
                }
                .xhr_foot_l::after{
                    left: -40px;
                    top: 50px;
                }
                .xhr_foot_r::after{
                    right: -40px;
                    top: 50px;
                }
                /* 制作小黄人的眼睛 */
                .xhr_eyes{
                    position: absolute;
                    top: 60px;
                    left: 25px;
                }
                .xhr_eyes_l, .xhr_eyes_r{
                    width: 90px;
                    height: 90px;
                    border: 5px solid #000;
                    border-radius: 100%;
                    background: #fff;
                    float: left;
                }
                .xhr_eyes_l::after, .xhr_eyes_r::after{
                    content: "";
                    width: 31px;
                    height: 20px;
                    position: absolute;
                    background: #000000;
                }
                .xhr_eyes_l::after{
                    left: -26px;
                    top: 35px;
                    transform: rotate(20deg);
                    border-radius: 2px 8px 0 2px;
                }
                .xhr_eyes_r::after{
                    right: -26px;
                    top: 35px;
                    transform: rotate(-20deg);
                    border-radius: 8px 2px 0 2px;
                }
                /* 制作眼珠 */
                .xhr_l_black, .xhr_r_black{
                    width: 50px;
                    height: 50px;
                    background: #000;
                    border-radius: 50%;
                    position: absolute;
                }
                .xhr_l_black{
                    left: 25px;
                    top: 25px;
                }
                .xhr_r_black{
                    right: 25px;
                    top: 25px;
                }
                .xhr_l_white, .xhr_r_white{
                    width: 20px;
                    height: 20px;
                    background: #fff;
                    border-radius: 50%;
                    position: absolute;
                }
                .xhr_l_white {
                    top: 40px;
                    left: 50px;
                }
                .xhr_r_white {
                    top: 40px;
                    right: 50px;
                }
                
                /* 制作嘴巴 */
                .xhr_mouth{
                    width: 60px;
                    height: 35px;
                    background: #fff;
                    border: 5px solid #000;
                    border-radius: 0 0 0 30px;
                    position: absolute;
                    top: 180px;
                    left: 90px;
                    transform: rotate(-30deg);
                }
                .xhr_mouth::after{
                    content: "";
                    width: 80px;
                    height: 40px;
                    background: yellow;
                    border-bottom: 5px solid #000;
                    position: absolute;
                    left: 1px;
                    top: -22px;
                    transform: rotate(30deg);
                }
                /* 制作裤子 */
                .xhr_trousers{
                    width: 100%;
                    height: 140px;
                    position: absolute;
                    top: 260px;
                }
                .xhr_trousers_t{
                    width: 150px;
                    height: 50px;
                    background: blue;
                    border: 5px solid #000;
                    border-bottom: none;
                    position: absolute;
                    left: 45px;
                    z-index: 99;
                }
                .xhr_trousers_b{
                    width: 250px;
                    height: 85px;
                    background: blue;
                    position: absolute;
                    top: 50px;
                    border-top: 5px solid #000;
                }
                /* 制作肩带 */
                .t_l_belt, .t_r_belt{
                    width: 100px;
                    height: 20px;
                    background: blue;
                    border: 5px solid #000;
                    position: absolute;
                }
                .t_l_belt{
                    top: -24px;
                    left: -75px;
                    transform: rotate(35deg);
                }
                .t_r_belt{
                    top: -24px;
                    right: -75px;
                    transform: rotate(-35deg);
                }
                .t_l_belt::after, .t_r_belt::after{
                    content: "";
                    width: 10px;
                    height: 10px;
                    background: #000;
                    border-radius: 50%;
                    position: absolute;
                    top: 5px;
                }
                .t_l_belt::after{
                    right: 5px;
                }
                .t_r_belt::after{
                    left: 5px;
                }
                /* 头发的动画效果 */
                .xhr_hair_1,.xhr_hair_2{
                    animation: hair 5s ease-in infinite;
                }
                @keyframes hair{
                    10%,50%,100%{
                        transform: rotate(48deg);
                    }
                    20%,80%{
                        transform: rotate(60deg);
                    }
                }
                /* 眼睛的动画 */
                .xhr_l_black,.xhr_r_black{
                    animation: blackEyes 5s ease-in infinite;
                }
                @keyframes blackEyes{
                    10%,50%,100%{
                        transform: translate(0);
                    }
                    30%{
                        transform: translate(20px);
                    }
                    80%{
                        transform: translate(-20px);
                    }
                }
                .xhr_l_white,.xhr_r_white{
                    animation: whiteEyes 5s ease-in infinite;
                }
                @keyframes whiteEyes{
                    10%,50%,100%{
                        transform: translate(0);
                    }
                    30%{
                        transform: translate(20px,1px);
                    }
                    80%{
                        transform: translate(-20px,1px);
                    }
                }
        </style>
    </head>
    <body>
        <!-- 容器 -->
        <div class="wrap">
            <!-- 头发 -->
            <div class="xhr_hair">
                <div class="xhr_hair_1"></div>
                <div class="xhr_hair_2"></div>
            </div>
            <!-- 身体 -->
            <div class="xhr_body">
                <!-- 眼睛 -->
                <div class="xhr_eyes">
                    <div class="xhr_eyes_l">
                        <div class="xhr_l_black"></div>
                        <div class="xhr_l_white"></div>
                    </div>
                    <div class="xhr_eyes_r">
                        <div class="xhr_r_black"></div>
                        <div class="xhr_r_white"></div>
                    </div>
                </div>
                <!-- 嘴巴 -->
                <div class="xhr_mouth"></div>
                <!-- 裤子 -->
                <div class="xhr_trousers">
                    <!-- 裤子的上部分 -->
                    <div class="xhr_trousers_t">
                        <div class="t_l_belt"></div>
                        <div class="t_r_belt"></div>
                    </div>
                    <!-- 裤子的下部分 -->
                    <div class="xhr_trousers_b"></div>
                </div>
            </div>
            <!-- 手臂 -->
            <div class="xhr_hand">
                <div class="xhr_hand_l"></div>
                <div class="xhr_hand_r"></div>
            </div>
            <!-- 腿脚 -->
            <div class="xhr_foot">
                <div class="xhr_foot_l"></div>
                <div class="xhr_foot_r"></div>
            </div>
        </div>
    </body>
</html>
posted @ 2022-12-14 10:11 致力于工作阅读(77) 评论(0) 收藏举报
刷新页面返回顶部
致力于工作

小黄人

公告
