Css绘画猪头

效果图.png

参考文章：http://www.javanx.cn/20190102/2019-css-pig/
‘猪’，代表着聚财福气，猪年即将到来，祝大家‘猪’事顺利，我属猪，你嘞（斜眼笑）
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;
            }
        }
    }
}