用div+css3画小丸子和爷爷_html/css_WEB-ITnose

用div+css3画小丸子和爷爷

仅仅使用div作为身体的布局，用css3的各种transform来绘制各部位的形状，当然也不会使用任何图片哦。

-> github链接地址

小丸子身体各部位代码详解

小丸子的头部

头部的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>

头部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;            }        }    }

小丸子的身体

身体的html结构

<div class="clothes">                    <div class="collar left-collar"></div>                <div class="collar right-collar"></div>                <div class="straps left-straps"></div>                <div class="straps right-straps"></div>            </div>            <div class="arm left-arm"></div>            <div class="arm right-arm"></div>                        <div class="belt"></div>            <div class="skirt">                <div class="line line1"></div>                <div class="line line2"></div>                <div class="line line3"></div>                <div class="line line4"></div>                <div class="line line5"></div>            </div>

身体的css样式

.clothes{        background: #fff;            width: 70px;        height: 80px;        position: absolute;        top:112px;        left: 31px;        z-index: 2;        border-radius: 30% 30% 10px 10px;        overflow: hidden;        .border;        .sleeve{            background: #fff;            width: 40px;            height: 40px;            position: absolute;            top: 10px;            border-radius: 10px;        }        .collar{            z-index: 3;            position: absolute;            .border;            width: 20px;            height: 10px;            background: #fff;            &.left-collar{                left: 12px;                transform:rotate(50deg);            }            &.right-collar{                right: 12px;                transform:rotate(-50deg);            }        }        .straps{            z-index: 2;            position: absolute;            width: 6px;            height: 100px;            background: #e9003a;            .border;            &.left-straps{                left: 12px;            }            &.right-straps{                right: 12px;            }        }    }    .arm{        width: 70px;        height: 70px;        border-radius: 50%;        background: #fff;        .border;        z-index: 1;        position: absolute;        top: 115px;        z-index: 0;        &.left-arm{            left: 10px;            &:after{                content: "";                position: absolute;                background:#ffef5e;                width: 60px;                height: 60px;                left: 12px;                top: 5px;                border-radius: 50%;                .border;            }        }        &.right-arm{            left: 52px;            &:after{                content: "";                position: absolute;                background:#ffef5e;                width: 60px;                height: 60px;                left: -4px;                top: 5px;                border-radius: 50%;                .border;            }        }    }    .belt{        background: #ed023a;        border: 1px solid #152131;        height: 10px;        left: 31px;        position: absolute;        top: 182px;        width: 70px;        z-index: 3;    }    .skirt{        background: #ed023a;        position: absolute;        background:  none;        border-color: #e9003a transparent;        border-image: none;        border-style: solid;        border-width: 0px 30px 50px;        height: 0;        left: 1px;        position: absolute;        top: 194px;        width: 72px;         z-index: 3;        border-radius: 0 0 50% 50%;        .line{            width: 1px;            height: 30px;            position: absolute;            background: #000;            top:10px;            transform-origin:0 0;            &.line1{                left: 10px;                transform:rotate(20deg);            }            &.line2{                left: 25px;                transform:rotate(10deg);            }            &.line3{                left: 35px;            }            &.line4{                right: 25px;                transform:rotate(-10deg);            }            &.line5{                right: 10px;                transform:rotate(-20deg);            }        }    }

小丸子的腿

小丸子的腿部html结构

<div class="leg left-leg"></div>            <div class="leg right-leg"></div>                        <div class="stockings left-stockings"></div>            <div class="stockings right-stockings"></div>            <div class="shoes left-shoes"></div>            <div class="shoes right-shoes"></div>

小丸子的腿部css样式

.leg{        width: 12px;        height: 40px;        background: #fadbc7;        .border;        position: absolute;        top: 220px;        z-index: 2;        &.left-leg{            left: 40px;        }        &.right-leg{            left: 78px;        }        &:after{            content: '';            width: 12px;            height: 16px;            background: #fff;            .border;            border-bottom: 0;            top: 40px;            left: -1px;            position: absolute;        }    }    .stockings{        width: 28px;        height: 12px;        background: #fff;        .border;        position: absolute;        z-index: 1;        transform-origin:0 0;        &.left-stockings{            left: 21px;            top: 275px;            transform:rotate(-20deg);            border-radius: 50% 0 0 50%;        }        &.right-stockings{            left: 83px;            top: 265px;            transform:rotate(20deg);            border-radius: 0 50% 50% 0;        }    }    .shoes{        width: 40px;        height: 17px;        position: absolute;        z-index: 0;        background: #a23030;        transform-origin:0 0;        border-radius: 50%;        &.left-shoes{            left: 13px;            top: 280px;            transform:rotate(-20deg);            border-radius: 50% 0 0 50%;        }        &.right-shoes{            left: 81px;            top: 267px;            transform:rotate(20deg);            border-radius: 0 50% 50% 0;        }    }

关于爷爷的部分我就不一一描述了，大家可以看一下源码，并提出自己的意见。