无聊之--css画holle kitty

作者: 清风徐云去 | 来源:发表于2019-05-06 17:26 被阅读0次

无聊之--css画holle kitty
石头画之hello kitty
新年第一画--little kitty
铁豆叔画画 - hello kitty
已超越毕加索和梵高，达芬奇的一幅画已经高达29亿人民币
无聊之画
无聊之画
无聊之画
无聊之画
饿了么泳道图

今天闲来无事，心血来潮想用css来画个东西，上网随便找了个简单的holle kitty的图就找着写了。成品很粗糙，没有处理细节，没有优化代码，写完就直接放上了，不喜勿喷。

原图.png

上代码：

<!DOCTYPE html>
<html>
<head>
    <title>holle kitty</title>
    <style>

        span,i{
            display: inline-block;
        }

        .box{
            position: relative;
            background: #fff;
            width: 500px;
            height: 500px;
            margin: 50px auto;
            border: 1px solid #000;
        }

        .head{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%) rotate(2deg);
            width: 353px;
            height: 278px;
            border-radius: 49%;
            border: 8px solid #000;
            
        }

        .box-shadow-p{
            box-shadow: 0 0 1px 1px #000;
        }

        /***眼睛***/
        .head .eye{
            position: absolute;
            top: 52%;
            width: 22px;
            height: 30px;
            background: #000;
            border-radius: 50%;
        }

        .head .eye-l{
            left: 25%;
        }

        .head .eye-r{
            right: 25%;
        }
        /***眼睛***/

        /***鼻子***/
        .head .nose{
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translateX(-50%) rotate(2deg);
            background: #FFF60A;
            width: 36px;
            height: 29px;
            border: 8px solid #000;
            box-sizing: border-box;
            border-radius: 50%;
        }
        /***鼻子***/

        /***胡子***/
        .head .mustache,
        .head .mustache span{
            position: absolute;
            background: #000;
        }

        .head .mustache .one::before{
            content: '';
            position: absolute;
            top: 0;
            left: -6px;
            width: 36px;
            height: 8px;
            background: #000;
            border-radius: 42%;
            transform: rotate(5deg);
            box-shadow: 0 0 1px 1px #000;
        }

        .head .mustache .two{
            position: absolute;
            top: 0;
            left: -21px;
            border-top-left-radius: 5px;
            border-top-right-radius: 2px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .head .mustache .two::before{
            content: '';
            position: absolute;
            top: 0px;
            left: -16px;
            width: 41px;
            height: 8px;
            background: #000;
            border-radius: 40%;
            transform: rotate(-7deg);
            box-shadow: 0 0 1px 1px #000;
        }

        .head .mustache-1{
            top: 54%;
            left: -5px;
        }

        .head .mustache-2{
            top: 67%;
            left: 8px;
            transform: rotate(-15deg);
        }

        .head .mustache-2 .one::before{
            top: -1px;
            left: -6px;
            width: 27px;
            transform: rotate(2deg);
        }

        .head .mustache-3{
            top: 78%;
            left: 33px;
            transform: rotate(-15deg);
            width: 0;
        }

        .head .mustache-3 .one{
            width: 0;
        }

        .head .mustache-3 .one::before{
            top: -1px;
            left: -11px;
            width: 27px;
            height: 7px;
            transform: rotate(-2deg);
            border-radius: 44%;
        }

        .head .mustache-3 .two::before{
            top: 1px;
            left: -30px;
            width: 58px;
            border-radius: 33%;
            transform: rotate(-7deg);
        }

        .head .mustache-4{
            top: 54%;
            right: -7px;
        }

        .head .mustache-5{
            top: 67%;
            right: -7px;
            transform: rotate(7deg);
        }

        .head .mustache-5 .one::before{
            left: -16px;
            width: 38px;
            height: 7px;
            transform: rotate(-2deg);
            border-radius: 37%;
        }

        .head .mustache-5 .two::before{
            top: 0;
            right: -11px;
            width: 47px;
            height: 7px;
            transform: rotate(-2deg);
            border-radius: 22%;
        }

        .head .mustache-6{
            top: 80%;
            right: 5px;
            transform: rotate(17deg);
        }

        .head .mustache-6 .one::before{
            left: -24px;
            width: 46px;
            height: 7px;
            transform: rotate(2deg);
            border-radius: 30%;
        }

        .head .mustache-6 .two::before{
            top: 0;
            right: 0;
            width: 28px;
            height: 7px;
            transform: rotate(-2deg);
            border-radius: 50%;
        }
        /***胡子***/

        /***耳朵***/
        .head .ear{
            position: absolute;
            background: #fff;
            width: 86px;
            height: 55px;
            border: 8px solid #000;
            border-color: #000 transparent transparent transparent;
            border-radius: 50%/22px 31px 0 0;
            transform: rotate(16deg);
        }

        .head .ear::before{
            content: '';
            position: absolute;
            width: 88px;
            height: 54px;
            border: 8px solid #000;
            border-color: #000 transparent transparent transparent;
            border-radius: 50%/25px 46px 0 0;
            transform: rotate(-101deg);
        }

        .head .ear-l{
            top: -11px;
            left: 5px;
        }

        .head .ear-l::before{
            top: -3px;
            left: -21px;
        }

        .head .ear-r{
            top: -10px;
            right: -11px;
            transform: rotate(-22deg);
        }

        .head .ear-r::before{
            top: -3px;
            right: -10px;
            transform: rotate(112deg);
        }
        /***耳朵***/

        /***爪子***/
        .head .claw{
            position: absolute;
            bottom: -19px;
            background: #fff;
            width: 82px;
            height: 55px;
            border: 8px solid #000;
            border-color: #000 transparent transparent;
            border-radius: 50%;
        }

        .head .claw::before{
            content: '';
            position: absolute;
            top: -14px;
            left: -4px;
            width: 82px;
            height: 65px;
            border: 8px solid #000;
            border-color: transparent transparent transparent #000;
            border-radius: 50%;
            transform: rotate(-4deg);
        }

        .head .claw::after{
            content: '';
            position: absolute;
            top: -10px;
            right: -8px;
            width: 82px;
            height: 65px;
            border: 8px solid #000;
            border-color: transparent #000 transparent transparent;
            border-radius: 50%;
            transform: rotate(1deg);
        }

        .head .claw i:nth-child(1){
            position: absolute;
            bottom: -7px;
            left: 0;
            width: 40px;
            height: 40px;
            border: 8px solid #000;
            border-color: transparent transparent #000 transparent;
            border-radius: 50%;
            transform: rotate(7deg);
        }

        .head .claw i:nth-child(2){
            position: absolute;
            bottom: -10px;
            left: 30px;
            width: 42px;
            height: 42px;
            border: 8px solid #000;
            border-color: transparent transparent #000 transparent;
            border-radius: 50%;
            transform: rotate(7deg);
        }

        .head .claw-l{
            left: 19px;
            transform: rotate(-10deg);
        }

        .head .claw-r{
            right: 19px;
            transform: rotate(-2deg);
        }

        .head .claw-r::before{
            top: -13px;
            left: -8px;
            width: 97px;
            height: 65px;
            transform: rotate(-3deg);
        }

        .head .claw-r i:nth-child(1) {
            bottom: -8px;
            left: -4px;
            width: 44px;
            height: 45px;
            transform: rotate(0deg);
        }
        /***爪子***/

        /***发卡***/
        .head .hairpin{
            position: absolute;
            top: -4px;
            right: -25px;
            width: 180px;
            height: 80px;
            transform: rotate(20deg);
        }

        .head .hairpin span{
            background-color: red;
        }

        .head .hairpin .hairpin-triangle{
            position: absolute;
            top: 0;
            border: 8px solid #000;
        }

        .head .hairpin .triangle-l{
            left: 0;
            width: 88px;
            height: 80px;
            border-radius: 50%/37px 37px 70px 70px;
            transform: rotate(268deg);
        }

        .triangle-r{
            right: 0;
            top: 12px !important;
            width: 60px;
            height: 60px;
            border: 8px solid #000;
            border-radius: 50%/23px 23px 50px 50px;
            transform: rotate(90deg);
        }

        .head .hairpin .circle{
            position: absolute;
            top: 20px;
            left: 70px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 8px solid #000
        }

        .head .hairpin .circle::before,
        .head .hairpin .circle::after{
            content: '';
            position: absolute;
            top: 3px;
            left: -29px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 8px solid #000;
            border-color: #000 transparent #000 #000;
        }

        .head .hairpin .circle::after{
            left: 40px;
            border-color: #000 #000 #000 transparent;
        }
        /***发卡***/
    </style>

</head>
<body>
    <div class="box">
        <div class="head box-shadow-p">
            <!-- 眼睛 -->
            <span class="eye eye-l"></span>
            <span class="eye eye-r"></span>
            <!-- 鼻子 -->
            <span class="nose"></span>
            <!-- 胡子 -->
            <span class="mustache mustache-1 ">
                <span class="one"></span>
                <span class="two"></span>
            </span>
            <span class="mustache mustache-2">
                <span class="one"></span>
                <span class="two"></span>
            </span>
            <span class="mustache mustache-3">
                <span class="one"></span>
                <span class="two"></span>
            </span>
            <span class="mustache mustache-4 ">
                <span class="one"></span>
                <span class="two"></span>
            </span>
            <span class="mustache mustache-5">
                <span class="one"></span>
                <span class="two"></span>
            </span>
            <span class="mustache mustache-6">
                <span class="one"></span>
                <span class="two"></span>
            </span>
            <!-- 耳朵 -->
            <span class="ear ear-l"></span>
            <span class="ear ear-r"></span>
            <!-- 发卡 -->
            <span class="hairpin">
                <span class="hairpin-triangle triangle-l"></span>
                <span class="hairpin-triangle triangle-r"></span>
                <span class="circle"></span>
            </span>

            <!-- 爪子 -->
            <span class="claw claw-l">
                <i></i>
                <i></i>
            </span>
            <span class="claw claw-r">
                <i></i>
                <i></i>
            </span>
        </div>
    </div>
</body>
</html>

成品.png

无聊之--css画holle kitty
今天闲来无事，心血来潮想用css来画个东西，上网随便找了个简单的holle kitty的图就找着写了。成品很粗糙，...
石头画之hello kitty
这个hello kitty是帮一个朋友画的，百度搜的Kitty猫的素材，然后就照着画了一个。【PS：一个小城市的...
新年第一画--little kitty
新年第一画，笔触比较粗糙，大家轻拍 soft kitty, warm kitty, little ball of ...
铁豆叔画画 - hello kitty
铁豆叔画画之hello kitty 工具：PPT画画流程：多边形叠加特点：96%接近原画铁豆叔之画略显幼稚...
已超越毕加索和梵高，达芬奇的一幅画已经高达29亿人民币
Holle，Holle 画酷又来了其实说起世界上最贵的画家那当然就属毕加索了毕加索可以说是目前公认的世界上...
无聊之画
无聊之画
无聊之画
纸破了，也沾油了…… 请原谅我懂得如何上色ヘ(￣ω￣ヘ)
无聊之画
饿了么泳道图
等外卖无聊，遂画之。