用纯CSS画一个萌萌哒的QQ企鹅

UniqueRony

于 2022-03-04 13:31:28 发布

阅读量291

点赞数

文章标签： css

本文链接：https://blog.csdn.net/huang_xiao_rong/article/details/123274660

版权

今天一时兴起，想用css画个企鹅。

先分析一下结构，页面分为一个容器，里面包括头部、左右眼、鼻子、围巾、肚子、左右脚、左右手共10个div，代码如下:

html部分：

    <div class="container">
        <!-- 头部 -->
        <div class="header">
        </div>
        <!-- 左眼 -->
        <div class="eye_left">
        </div>
        <!-- 右眼 -->
        <div class="eye_right">
        </div>
        <!-- 鼻子 -->
        <div class="nose">
        </div>
        <!-- 围巾 -->
        <div class="scarf">
        </div>
        <!-- 肚子 -->
        <div class="belly">
        </div>
        <!-- 左脚 -->
        <div class="foot-left">
        </div>
        <!-- 右脚 -->
        <div class="foot-right">
        </div>
        <!-- 左手 -->
        <div class="hand-left">
        </div>
        <!-- 右手 -->
        <div class="hand-right">
        </div>
    </div>

css部分:

        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            position: relative;
        }

        /* 头部区域 */
        .header {
            width: 150px;
            height: 150px;
            border-radius: 100% 100% 40% 40%;
            background-color: black;
            position: absolute;
            top: 135px;
            left: 109px;
        }


        /* 眼睛部分，采用伪元素处理方案 */
        .eye_left,
        .eye_right {
            height: 36px;
            width: 21px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: 158px;
        }

        .eye_left {
            left: 159px;
        }

        .eye_right {
            right: 188px;
        }

        .eye_left::after{
            content: "";
            width: 9px;
            height: 14px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            right: 4px;
            top: 16px;
        }

        .eye_right::after {
            content: "";
            width: 14px;
            height: 8px;
            border-top: 5px solid black;
            border-radius: 50%/50%;
            position: absolute;
            transform: rotate(-11deg);
            right: 3px;
            top: 19px;
        }

        .nose {
            height: 27px;
            width: 81px;
            border-radius: 90% 90% 100% 100%;
            background-color: rgb(224, 157, 69);
            position: absolute;
            top: 199px;
            left: 146px;
            z-index: 9;
        }

        .scarf{
            width: 150px;
            position: absolute;
            top: 220px;
            left: 109px;
            border-top: 40px solid red;
            background-color: red;
            border-radius: 0% 0% 23% 23%;
            z-index: 8;
        }

        .scarf::before{
            content: "";
            width: 150px;
            position: absolute;
            top: -48px;
            left: 0px;
            border-top: 20px solid black;
            background-color: black;
            border-radius: 0% 0% 23% 23%;
        }

        .scarf::after{
            content: "";
            height: 43PX;
            width: 36px;
            position: absolute;
            top: -9px;
            left: 33px;
            background-color: red;
            border-radius: 0% 0% 23% 23%;
        }

        .belly{
            width: 150px;
            height: 150px;
            border-radius:50%;
            background-color: black;
            position: absolute;
            top: 193px;
            left: 109px;
        }

        .belly::before{
            content: "";
            width: 110px;
            height: 130px;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: 13px;
            left: 21px;
        }

        .foot-left,.foot-right{
            height: 27px;
            width: 81px;
            border-radius: 50% 50% 50% 50%;
            background-color: rgb(224, 157, 69);
            position: absolute;
            bottom: 56px;
            z-index: -1;
        }
        .foot-left{
            left: 112px;
        }
        .foot-right{
            left: 174px;
        }

        .hand-left,.hand-right{
            height: 27px;
            width: 81px;
            border-radius: 50% 50% 50% 50%;
            background-color: black;
            position: absolute;
            bottom: 102px;
            z-index: -1;
        }
        .hand-left{
            left: 71px;
            transform: rotate(-75deg);
        }

        .hand-right{
            left: 215px;
            transform: rotate(-100deg);
        }

最终效果展示,是不是感觉萌萌哒: