31CSS3-小黄人案例

使用 CSS3 和 HTML5 制作一个小黄人。

结构代码：

    <div class="wrap">
        <!-- 头发 -->
        <div class="hair">
            <div class="hair_1"></div>
            <div class="hair_2"></div>
        </div>
        <!-- 身体 -->
        <div class="body">
            <!-- 眼睛 -->
            <div class="eyes">
                <!-- 左眼 -->
                <div class="eyes_l">
                    <div class="l_black"></div>
                    <div class="l_white"></div>
                </div>
                <!-- 右眼 -->
                <div class="eyes_r">
                    <div class="r_black"></div>
                    <div class="r_white"></div>
                </div>
            </div>
            <!-- 嘴巴 -->
            <div class="mouth"></div>
            <!-- 裤子 -->
            <div class="trousers">
                <!-- 裤子上 -->
                <div class="trousers_t">
                    <div class="t_l_belt"></div>
                    <div class="t_r_belt"></div>
                </div>
                <!-- 裤子下 -->
                <div class="trousers_b"></div>
            </div>
        </div>

        <!-- 手臂 -->
        <div class="hand">
            <div class="hand_l"></div>
            <div class="hand_r"></div>
        </div>

        <!-- 腿脚 -->
        <div class="foot">
            <div class="foot_l"></div>
            <div class="foot_r"></div>
        </div>

    </div>

CSS 样式：

        .wrap {
            width: 400px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid red;
            position: relative;
        }

        /*身体*/
        .body {
            width: 250px;
            height: 400px;
            border: 5px solid #000;
            border-radius: 125px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: yellow;
            overflow: hidden;

        }
        /*头发*/
        .hair_1,
        .hair_2 {
            width: 130px;
            height: 100px;
            border-top: 10px solid #000;
            border-radius:50%;
            position: absolute;
        }
        .hair_1 {
            left: 100px;
            top: 80px;
            transform: rotate(45deg);
        }
        .hair_2 {
            left: 102px;
            top: 70px;
            transform: rotate(50deg);
        }

        /*手臂*/
        .hand_l,
        .hand_r {
            width: 100px;
            height: 100px;
            border: 5px solid #000;
            position: absolute;
            border-radius: 30px;
            background-color: yellow;
            z-index: -1
        }
        .hand_l {
            left:50px;
            top:300px;
            transform: rotate(30deg);
        }
        .hand_r {
            right:50px;
            top:300px;
            transform: rotate(-30deg);
        }
        .hand_l::after,
        .hand_r::after {
            content: "";
            width: 30px;
            height: 10px;
            position: absolute;
            background: #000;
            border-radius:5px;

        }
        .hand_l::after {
            left: 6px;
            top: 60px;
            transform: rotate(-90deg);
        }
        .hand_r::after {
            right: 6px;
            top:60px;
            transform: rotate(-90deg);
        }

        /*腿*/

        .foot_l,
        .foot_r {
            width: 40px;
            height: 70px;
            background-color: #000;
            position: absolute;
            top:490px;
            z-index: -1;
        }

        .foot_l {
            left:155px;

        }

        .foot_r {
            right:155px;

        }

        /*脚*/
        .foot_l::after,
        .foot_r::after {
            content: "";
            width: 60px;
            height: 40px;
            background-color: #000;
            border-radius: 20px;
            position: absolute;
            top: 30px;
        }

        .foot_l::after {
            left: -40px;
        }
        .foot_r::after {
            right: -40px;
        }

        /*眼睛*/
        .eyes{
            /*width: 100%;
            height: 100px;*/
            /*border: 1px solid red;*/
            position: absolute;
            top: 60px;
            left: 25px;
        }
        .eyes_l,
        .eyes_r {
            width: 90px;
            height: 90px;
            border: 5px solid #000;
            border-radius: 50%;
            background-color: #fff;
            float: left;

        }
        .eyes_l::after,
        .eyes_r::after {
            content: "";
            width: 31px;
            height: 20px;
            position: absolute;
            background-color: #000;
            top: 35px;

        }

        .eyes_l::after {
            left: -26px;
            transform: rotate(20deg);
            border-radius: 2px 7px 0px 2px;
        }
        .eyes_r::after {
            right: -26px;
            transform: rotate(-20deg);
            border-radius: 8px 2px 0px 2px;
        }

        /*黑色眼珠*/
        .l_black,
        .r_black {
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            top: 23px;

        }
        .l_black {
            left: 25px;
        }
        .r_black {
            left: 125px;
        }
        /*白眼珠*/

        .l_white,
        .r_white {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 40px;
        }
        .l_white {
            left: 50px;
        }
        .r_white {
            left: 130px;
        }

        /*嘴巴*/
        .mouth {
            width: 60px;
            height: 35px;
            border: 5px solid #000;
            border-radius: 0 0 0 30px;
            position: absolute;
            background-color: #fff;
            left: 90px;
            top: 180px;
            transform: rotate(-30deg);
        }
        .mouth::after {
            content: "";
            width: 80px;
            height: 40px;
            background-color: yellow;
            position: absolute;
            border-bottom: 5px solid #000;
            left: 1px;
            top: -22px;
            transform: rotate(30deg);
        }

        /*裤子上*/
        .trousers {
            width: 100%;
            height: 150px;

            position:absolute;
            top: 260px;

        }
        .trousers_t {
            width: 150px;
            height: 51px;
            background-color: blue;
            border: 5px solid #000;
            border-bottom: none;
            position: absolute;
            left: 45px;
            z-index: 10;

        }
        .trousers_b {
            width: 250px;
            height: 86px;
            background-color: blue;
            position: absolute;
            top: 50px;
            border-top: 5px solid #000;
            /*border-radius: 0 0 125px 125px;*/
        }

        /*肩带*/
        .t_l_belt,
        .t_r_belt {
            width: 100px;
            height: 20px;
            background-color: blue;
            border: 5px solid #000;
            position: absolute;
            top: -24px;

        }
        .t_l_belt {
            left:-74px;
            transform: rotate(35deg);
        }
        .t_r_belt {
            right: -74px;
            transform: rotate(-35deg);
        }

        .t_l_belt::after,
        .t_r_belt::after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #000;
            border-radius: 50%;
            top: 5px;
        }
        .t_l_belt::after{
            left: 87px;
        }
        .t_r_belt::after {
            left: 3px;
        }

        /*动画*/
        .hair_1,
        .hair_2 {
            animation: hair 5s ease-in infinite;
        }

        @keyframes hair {
            10% {
                transform: rotate(45deg);
            }
            20% {
                transform: rotate(56deg);
            }
            50% {
                transform: rotate(45deg);
            }
            80% {
                transform: rotate(56deg);
            }
            100% {
                transform: rotate(45deg);
            }
        }

        .l_black,
        .r_black {
            animation: eye 5s linear infinite;
        }

        @keyframes eye {
            10% {
                transform: translate(0);
            }
            20% {
                transform: translate(20px);
            }
            50% {
                transform: translate(0);
            }
            80% {
                transform: translate(-20px);
            }
            100% {
                transform: translate(0);
            }
        }

        .l_white,
        .r_white {
            animation: eyewhite 5s linear infinite;
        }

        @keyframes eyewhite {
            10% {
                transform: translate(0,0);
            }
            20% {
                transform: translate(20px,5px);
            }
            50% {
                transform: translate(0,0);
            }
            80% {
                transform: translate(-20px,5px);
            }
            100% {
                transform: translate(0,0);
            }
        }

效果图：