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

仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦。那就没意思了。

有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了。

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

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

效果是这个样子的

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

HTML结构如下:(ps:每个小黄人的html结构都是一样的)

<div class="minions">
            <div class="hairs">
                <div class="hair1"></div>
                <div class="hair2"></div>
                <div class="hair3"></div>
            </div>
            <div class="body">
                <div class="cloth"></div>
                <div class="straps left-straps">
                    <div class="fastener"></div>
                </div>
                <div class="straps right-straps">
                    <div class="fastener"></div>
                </div>
            </div>
            <div class="glasses-type"></div>
            <div class="glasses left-glasses">
                <div class="eye">
                    <div class="ball">
                        <strong></strong></div>
                </div>
            </div>
            <div class="glasses right-glasses">
                <div class="eye">
                    <div class="ball">
                        <strong></strong></div>
                </div>
            </div>
            <div class="mouth">
                <div class="tooths">
                    <div class="line"></div>
                    <div class="tooth1"></div>
                    <div class="tooth2"></div>
                    <div class="tooth3"></div>
                </div>
            </div>
            <div class="arm left-arm">
                <div class="hand"></div>
            </div>
            <div class="arm right-arm">
                <div class="hand"></div>
            </div>
            <div class="pocket">
                <div>
                    <div></div>
                </div>
            </div>
            <div class="trousers"></div>
            <div class="leg left-leg">
                <div class="footer"></div>
            </div>
            <div class="leg right-leg">
                <div class="footer"></div>
            </div>
        </div>

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);
}

最后加点料

附加了2个小动画效果,眼睛转动和牙齿抖动。

@keyframes eye {
    0% {
        transform:rotate(0,0);
    }
    50% {
        transform:translate(70px,0px)
    }
    100% {
        transform:translate(0px,0px)
    }
}

@keyframes up-down {
    0% {
        transform:rotate(0,0);
    }
    50% {
        transform:translate(0,2px)
    }
    100% {
        transform:translate(0,0)
    }
}

后续

没有特别详细的描述每个细节部分,大家看一下源码或者fork一下就能知道具体每个元素是怎么实现的了。
当然这个肯定是有bug的,比如参数设置的过大或者过小,都会导致生成出来的小黄人乱七八糟,也欢迎大家吐槽。

原文地址:https://www.cnblogs.com/jlfw/p/12638126.html

时间: 2024-10-13 05:36:39

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

先做一个“小程序”——关于微信应用号的六大猜想

先做一个“小程序”——关于微信应用号的六大猜想 9月 21 日,苦等了9个多月的时间,应用号终于与我们见面了,命名为「小程序」. 01 为什么推出小程序? 考虑到小程序对整个APP市场的影响,毫无疑问会对现有的APP生态带来一定的冲击.但是,之所以推出小程序,最直接的原因可能是为了构建和扩充微信生态链,让微信更具开放性. 如我们所知,目前微信公众号分为三类: • 服务号,连接人和商品,目前很多电商企业,以及在微信端提供产品和服务的企业都用服务号. • 订阅号,微信官方的定位是阅读,连接人和资讯的

用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。

最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量.<s:iterator>标签有一个value属性,用来存放在Action类的方法中存数据的list集合,还有一个id,好像是说指定集合的索引的意思,就是给list集合遍历出来的每个对象加上一个数字标签,反正我是这么理解的,没用过.还有一个很重要,就是var变量,我在s:iterator按ctr

从今天起,做一个幸福的人

从明天起,做一个幸福的人 喂马,劈柴,周游世界 从明天起,关心粮食和蔬菜 我有一所房子,面朝大海,春暖花开 从明天起,和每一个亲人通信 告诉他们我的幸福 那幸福的闪电告诉我的 我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人,我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只愿面朝大海,春暖花开 --海子 一路走来,时至今日,大学将逝未逝,心路多少有些起伏.蓦然想起海子的这首诗,竟思绪万千-- 大四,我不顾所有人的反对,毅然放弃大学文凭只身离开学校来到繁

做一个完整的人

一个完整的人首先要接纳自己的不足和缺点. 每一个人都有缺点,都有犯错误的时候,要承认自己的平凡,做一个真实的自己,这样你才会拥有快乐. 如果有一天,别人说你已经如此完美,如此优秀了,这并不是什么好事,那个时候你会发现人生其实也就这样,生无可恋,没有动力,就好像玩游戏开挂一样,世界无敌了之后只有一个想法就是想死. 我们要获取欢愉的途径只有承认自己的不足,接纳自己的消极,接纳自己的真实的想法. 没有谁是永远积极的,也没有人永远充满激情.包括那些侃侃而谈的大师,包括那些痴迷研究的教授,包括马云,包括拿

做一个有意思的人

http://www.nowamagic.net/librarys/eight/posts/2545到底应该过一个有意义的人生,还是做一个有意思的人?什么样的人才是一个有意思的人.第一次读这篇文章,我就十分感概.我们从小受教育说要为社会做贡献,上班了被要求以公司为家,或许我们应该思考一下如何做一个有意思的人.这篇文章或许你看过,我觉得可以再看一遍. 作者:黄铁鹰 & 芮成钢 与几位好友们有一个共识:大家对一个人最高的评价是:“这是一个很有意思,很精彩的人”.大家以这个标准,来判断一个人是否值得成

如何做一个优雅的人

--无论从事什么职业,我们首先是一个女人或者男人.女人应该像淑女,男人应该像绅士,愿所有的中国人都是淑女和绅士. --这里所说的文化.教养并不是大学生.硕士生或者博士生之类,而是一个人的行为举止中透露出来的素养,这是你们从书本上学不到的东西. --懂得标准,你就可以改变:不懂标准,你就没有信心. --人一开口,我们就知道他的内才有多少,所以,每个人都应该不断地丰富自己的内心世界. --如果你让他感觉到你很关心他,你真的很在乎他的病能不能好,那你就是一个很有修养的医生. 今天,我非常高兴有机会和你

[转]永远做一个有计划的人

大部分的人都高估了1年内所能完成的事,而低估了10年之中所能完成的事.人生中重要的是开始,但要取得成就就需要一长段的时间. 你可以在街上随意叫住100个年轻人,一个个地问他们:“你认为你现在的生活和工作方式保证会让你在生活中一败涂地吗?” 当他们从最初的震惊中恢复过来,每个人都会说:“你有病啊?我的工作.生活方式会让我一定失败?我正在为光明的前途而努力工作,我一定能成功.” 每个人都这样想,真是可悲.几乎每个人都相信自己会成功,但结果却常常事与愿违,要知道这个世界上真正能实现自己的梦想取得成功的

无问西东-做一个纯粹的人

无问西东-做一个纯粹的人 记得昨天吃饭的时候,还和朋友聊到电影的话题,阿庆说今天去看电影了,我还调侃式的问了句是去看无问东西吗?在最近的新闻中有看到这个字眼,看到黄晓明,章子怡这样的阵容,我对电影并没有抱希望,没有看的想法,也有没有去了解的欲望. 谁知今天蛋蛋买错票了,阴差阳错的去看了这部文艺片,在此之前,我一直认为,文艺片应该式在屋里,自己一个人独自的享受,而去电影院就应该去看大场面的电影,寻求视觉和听觉的感受.但对于这一部电影来讲,还是到电影院去看比较好,在开头,还曾感受到了一些枯燥,直到出

要做一个什么样的人?

首先,一定要做一个善良的人,这也是教授对我说的第一句话.善良是人类最宝贵的品质,是作为一个人最基本的准则,也是中华民族族的文化和精神瑰宝,不仅要与人为善,还要与物为善.但是现在社会上的一小部分"人"为了一己私利,丢失了善良,毒奶粉,打车软件等侵害事件层出不穷,我虽然对此感到痛心,但却有无能为力,无可奈何.穷则独善其身,达则兼济天下,所以我还是先做好自己. 其次,百善孝为先.高考前的一次重病虽然夺去了我三年的卧薪尝胆的拼搏,也对我后期的学习能力造成的一定影响,但是却让我真真切切的体会到了