Css绘画猪头

作者: w_wx_x | 来源:发表于2019-01-08 09:52 被阅读6次
    效果图.png
    参考文章:http://www.javanx.cn/20190102/2019-css-pig/
    ‘猪’,代表着聚财服气,猪年即将到来,祝大家‘猪’事顺利,我属猪,你嘞(斜眼笑)
    html
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>猪猪</title>
            <link rel="stylesheet" type="text/css" href="./css/test.css">
        </head>
        <body>
            <div class="pig">
                <div class="body">
                    <div class="ear"></div>
                    <div class="eye">
                        <div class="left-eye"></div>
                        <div class="right-eye"></div>
                    </div>
                    <div class="nose"></div>
                </div>
                <div class="foot">
                    <div class="left-foot"></div>
                    <div class="right-foot"></div>
                </div>
            </div>
        </body>
    </html>
    

    scss

    * {
        padding: 0;
        margin: 0;
    }
    @mixin ear {
        content: '';
        display: inline-block;
        width: 50px;
        height: 50px;
        background: #db7452;
        border-radius: 50% 0;
        box-shadow: 1px 1px 4px #8c2d1b;
    }
    @mixin eye($width,$height,$marginL) {
        position: relative;
        content: '';
        display: inline-block;
        margin-left: $marginL;
        width: $width;
        height: $height;
    }
    @mixin nose($left) {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d27658;
        position: relative;
        left: $left;
    }
    @mixin foot($deg) {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-width: 5px 15px 8px 5px;
        border-color: transparent #f3ad8f transparent transparent;
        border-style: solid;
        transform: rotate($deg);
    }
    .pig {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        // 身体就是个椭圆
        .body {
            width: 200px;
            height: 150px;
            border: 1px solid #f3ad8f;
            border-radius: 120px 120px 100px 100px;
            background-color: #f3ad8f;
            position: relative;
            // 耳朵也是在圆形的基础上进行变形
            .ear {
                width: 100%;
                height: 50px;
                position: absolute;
                top: -10px;
                &::before {
                    @include ear;
                    margin-left: 20px;
                }
                &::after {
                    @include ear;
                    float: right;
                    transform: rotateY(180deg);
                    margin-right: 20px;
                }
            }
            // 眼睛是由一个三角和椭圆拼接而成
            .eye {
                width: 100%;
                height: 20px;
                margin-top: 60px;
                > div {
                    width: 48%;
                    height: 100%;
                    text-align: center;
                    display: inline-block;
                    &::before {
                        @include eye(0px,0px,8px);
                        left: -5px;
                        top: -1px;
                        border-width: 4px;
                        border-style: solid;
                        border-color: transparent #000 transparent transparent;
                    }
                    &::after {
                        @include eye(5px,10px,-5px);
                        background: #000;
                        border-radius: 0 10px 10px 0;
                    }
                }
            }
            // 鼻子是由一个椭圆和两个圆拼接而成
            .nose {
                width: 60px;
                height: 30px;
                background: #da938f;
                border-radius: 20px;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                &::before {
                    @include nose(-10px);
                }
                &::after {
                    @include nose(10px);
                }
            }
        }
        // 脚是由两个三角形拼接而成
        .foot {
            width: 200px;
            height: 20px;
            margin-top: -10px;
            .left-foot {
                float: left;
                margin-left: 20px;
                transform: rotate(20deg);
                &::before {
                    @include foot($deg:-80deg);
                }
                &::after {
                    @include foot($deg:-100deg);
                    margin-left: -10px;
                }
            }
            .right-foot {
                float: right;
                margin-right: 20px;
                transform: rotate(-20deg);
                &::before {
                    @include foot($deg:-80deg);
                }
                &::after {
                    @include foot($deg:-100deg);
                    margin-left: -10px;
                }
            }
        }
    }
    
    

    相关文章

      网友评论

        本文标题:Css绘画猪头

        本文链接:https://www.haomeiwen.com/subject/zmxvrqtx.html