【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

2016-05-10 08:57:00

用 DIV + CSS3 画小黄人

仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各个细节的形状，当然也不会使用任何图片哦。那就没意思了。[br]有的同学说，用canvas不是能画得更逼真而且更简单吗？这点我也非常赞同，但我的理由还是，那就没意思了。

这次用到了一些LESS的特性，通过设置一些指定的参数来生成不同种类、不同身材的小黄人。

GitHub传送门：https://github.com/lancer07/css3Minons

效果是这个样子的[br] UI设计

首先先做个标准版的（ps：也就是图中的第一个小黄人)

HTML结构如下：（ps：每个小黄人的html结构都是一样的）

                    **                    **

LESS代码如下：（ps：先定义一个小黄人的类，然后通过设置参数来实例化每个小黄人)

定义小黄人类

.Minion(@width:1;@height:1;@eye:2){
width: 380px @width;
height:700px @height;
position:absolute;
margin-top: -100px;
margin-left:-20px;
transform : scale(0.5,0.5);
.hairs{
position:absolute;
top: -40px;
z-index: 3;
width: 100%;
.hair{
background:# 000;
width:2px;
height:70px;
position:absolute
}
.hair1{
.hair;
left:45%;
transform:rotate(-20deg);
}
.hair2{
.hair;
left:50%;
}
.hair3{
.hair;
left:55%;
transform:rotate(20deg);
}
}
.body{
overflow: hidden;
background: # fff500;

    width: 380px * @width;    position:absolute;    z-index: 1;    height:700px * @height;    border-radius: 180px * @width;}.glasses-type{ //眼镜    height:52px;    background:# 1f1a17;    width:100%;    position: absolute;    top: 200px;    z-index: 1;}.glasses{    z-index: 2;    position:absolute;    background:# dededd;    border:2px solid # 1f1a17;    width:150px;    height:150px;    border-radius: 50%;    top: 140px;    &.left-glasses when (@eye = 2){        left:8%;        .ball{            //left : 45%;            animation: eye 1.5s infinite ease;        }    }    &.right-glasses when (@eye = 2){        right:8%;        .ball{            //right:45%;            animation: eye 1.5s infinite ease;        }    }    &.left-glasses when (@eye = 1){        left:50%;        margin-left: -90px;        width: 180px;        height: 180px;        .eye{            width: 150px;            height: 150px;            .ball{                animation: eye 1.5s infinite ease;            }        }    }    &.right-glasses when (@eye = 1){        display: none;    }    .eye{        background:# fff;        width:120px;        height:120px;        border-radius: 50%;        border:2px solid # 1f1a17;        margin:15px auto;        position:relative;        .ball{            background:# 8f5444;            width:40px;            height:40px;            border-radius: 50%;            border:2px solid # 1f1a17;            position:absolute;            top: 40%;            transition: all .15s linear;            strong{                display: block;                width:20px;                height:20px;                background:# 1f1a17;                border-radius: 50%;                position:absolute;                top: 10px;                left:10px;            }        }    }}.mouth{    width:40%;    height:80px;    background:# fff;    position:absolute;    bottom:42%;    left:30%;    z-index: 1;    border-radius: 120px 120px 40px 40px;    border:2px solid # 1f1a17;    overflow:hidden;    animation: up-down 0.5s infinite ease;    .tooths{        .tooth{            border-right:2px solid # 1f1a17;            height:100%;            width:0;            position:absolute;        }        .tooth1{            .tooth;            left:25%;        }        .tooth2{            .tooth;            left:50%;        }        .tooth3{            .tooth;            left:75%;        }        .line{            width:100%;            top: 48%;            border-top:3px solid # 1f1a17;            position:absolute;        }    }}.arm{    position:absolute;    width:50px;    height:400px;    background:# fff500;    border-radius: 50px;    top: 190px;    z-index: 0;    &.left-arm{        left:-20px;        transform:rotate(20deg);    }    &.right-arm{        right:-20px;        transform:rotate(-20deg);    }    .hand{        position:absolute;        bottom:0;        width:60px;        height:60px;        border-radius: 50%;        background:# 1f1a17;        left:-5px;    }}.cloth{    background:# 667ab3;    border-radius: 20px;    bottom:20px;    width:80%;    height:250px;    position:absolute;    z-index: 1;    left:10%;}.pocket{    border:2px solid # 1f1a17;    border-radius: 5px 5px 30px 30px;    width:100px;    left:50%;    margin-left: -50px;    height:100px;    position:absolute;    z-index: 2;    bottom: 80px;    >div{        background:# 1f1a17;        width:50px;        height:50px;        border-radius: 50%;        top: 20px;        left:25px;        position:absolute;        >div{            width:20px;            height:20px;            border:5px solid # 667ab3;            transform:rotate(45deg);            position:absolute;            top: 10px;            left:10px        }    }}.trousers{    background:# 667ab3;    border-radius: 10px 10px 130px 130px;    bottom:0;    width:100%;    height:160px;    position:absolute;    z-index: 1;}.straps{    width:40px;    height:150px;    position:absolute;    z-index: 1;    background:# 667ab3;    bottom:230px;    &.left-straps{        left:10px;        transform:rotate(-40deg);    }    &.right-straps{        right:10px;        transform:rotate(40deg);    }    .fastener{        background:# 1f1a17;        width:20px;        height:20px;        border-radius: 50%;        bottom:10px;        position:absolute;        left:10px;    }}.leg{    background:# 667ab3;    width:70px;    height:120px;    position:absolute;    bottom:-80px;    &.left-leg{        left:20%;        .footer{            right:-2px;            border-radius: 100px 0 0 20px;        }    }    &.right-leg{        right:20%;        .footer{            left:-2px;            border-radius: 0 100px 20px 0;        }    }    .footer{        background:# 1f1a17;        width:100px;        height:50px;        position:absolute;        bottom:0;    }}

}

实例化

.minion-1{
z-index: 1;
top: 50px;
left: 0;
.Minion(1,1,2);
}

.minion-2{
z-index: 2;
top: 0;
left: 24%;
.Minion(0.88,1.1,1);
}

.minion-3{
z-index: 2;
top: 44px;
left: 42%;
.Minion(1.15,1.02,1);
}

.minion-4{
z-index: 1;
top: 5px;
left: 67%;
.Minion(1,1.1,2);
}