div+css3 を使用してリトルボールとおじいちゃんを描画します_html/css_WEB-ITnose

div+css3を使ってリトルボールとおじいちゃんを描きます

体のレイアウトにはdivのみを使用し、各パーツの形状はcss3の各種変形を使用して描画します もちろん絵は使いません。

-> github リンクアドレス

Xiaowanzi の体の各部分の詳細コード

Xiaomaru の頭

頭の HTML 構造

<div class="hairs">    <div class="hair hair1"></div>    <div class="hair hair2"></div>    <div class="hair hair3"></div>    <div class="hair hair4"></div>    <div class="hair hair5"></div>    <div class="hair hair6"></div>    <div class="hair hair7"></div></div><div class="face">    <div class="brow left-brow"></div>    <div class="brow right-brow"></div>    <div class="eye left-eye"></div>    <div class="eye right-eye"></div>    <div class="blusher left-blusher"></div>    <div class="blusher right-blusher"></div>    <div class="mouth"></div>    <div class="ear left-ear"></div>    <div class="ear right-ear"></div></div>

Head CSS スタイル

.hairs{        background: #152131;        width: 190px;        height: 250px;        border-radius: 50% 50% 0 0;        left: -30px;        top: -50px;        position: absolute;        overflow: hidden;        &:after{            content: '';            position: absolute;            width: 300px;            height: 200px;            background: #ffef5e;            top: 120px;        }        .hair{            width: 35px;            height: 45px;            background: #152131;            position: absolute;            z-index: 1;            transform: rotate(70deg) scale(1) skew(44deg) translate(8px);            &.hair1{                top: 17px;                left: 27px;            }            &.hair2{                top: 8px;                left: 52px;            }            &.hair3{                top: 4px;                left: 73px;            }            &.hair4{                top: 0;                left: 90px;            }            &.hair5{                top: 4px;                left:108px;            }            &.hair6{                top: 8px;                left: 125px;            }            &.hair7{                top: 17px;                right: 17px;            }        }    }    .face{        background: #fbdac7;        width: 130px;        height: 100px;        position: absolute;        top: 0;        border-radius: 20px 20px 50px 50px;        &:after{  //脖子            content: "";            width: 14px;            height: 10px;            background: #fbdac7;            position: absolute;            bottom:-12px;            left: 50%;            margin-left: -7px;            .border;        }        .border;        .brow{            width: 42px;            height: 10px;            background: #152131;            position: absolute;            top: 26px;            border-radius: 50%;            &:after{                content: "";                background: #fbdac7;                position: absolute;                width: 50px;                height: 10px;                top: 1px;                border-radius: 50%;            }            &.left-brow{                left : 18px;                transform:rotate(-10deg);            }            &.right-brow{                right: 14px;                transform:rotate(10deg);            }        }        .eye{            width: 14px;            height: 14px;            border-radius: 50%;            background: #000;            position: absolute;            top: 40px;            z-index: 2;            &.left-eye{                left: 32%;            }            &.right-eye{                right: 32%;                //animation: eye 1s infinite ease;            }        }        .blusher{            width: 12px;            height: 12px;            border-radius: 50%;            background: #f79c99;            position: absolute;            top: 70px;            &.left-blusher{                left: 8px;            }            &.right-blusher{                right: 8px;            }        }        .mouth{            .border;            z-index: 1;            width: 30px;            height: 30px;            background: #d96b6e;            position: absolute;            top: 50px;            left: 50px;            border-radius: 50%;            &:after{                content: "";                width: 60px;                height: 30px;                background: #fbdac7;                position: absolute;                top: -10px;                left: -20px;                border-radius: 30%;            }        }        .ear{            width: 10px;            height: 20px;            background: #fbdac7;            position: absolute;            top: 30px;            z-index: 2;            &.left-ear{                left: -11px;                border-radius: 5px 0 0 10px;            }            &.right-ear{                right: -11px;                border-radius: 0 5px 10px 0;            }        }    }

シャオマルの息子の体...おじいちゃんそれぞれについては説明しませんので、ソースコードを見て自分の意見を述べてください。