正文

二次元的css——用div+less做一个小黄人构造器(代码片段)

jlfw  jlfw  2022-12-25  603

关键词：

仅仅使用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的，比如参数设置的过大或者过小，都会导致生成出来的小黄人乱七八糟，也欢迎大家吐槽。

来自异次元的一篇博客

异次元成员介绍一.队名：异次元（寓意：二次元和三次元的一次组队，大家来自不同的次元，那么会碰撞出怎样的火花呢？）二.队员介绍：211614331王诚荣（他是组长）211614354陈斌（前端组组员）211605242杨慧德（前端组组员）2116... 查看详情

5亿投资a站和g站，中文在线欲借“二次元”之力敲开泛娱乐大门

...文在线将以2.5亿元认购广州弹幕网络科技有限公司(运营二次元的弹幕网站AcFun，下称A站)13.51%股权，同时拟以2.5亿元增资、收购共获得晨之科(运营二次元的优质社区GuluGulu，下称G站)20%股权。（注：二次元指由动漫、动画、游戏... 查看详情

唯有“商业让位艺术”可解国内二次元产业困局

...日，薛之谦在《明日之子》节目直播中因被主办方要求投二次元选手荷兹一票而认为比赛有黑幕，当场斥责工作人员后怒摔话筒走人致使直播一度中断。此事一出立刻掀起轩然大波，在热议薛之谦的行为之余，二次元这一话题也... 查看详情

用python让你完成一次绝美樱花视觉体验瞬间陷入二次元~(代码片段)

🌸导语：哈喽！铁汁萌~大家看过樱花吗？小编之前有幸在武汉大学看到过一次太美啦~真的相信我看一次樱花一点要列入人生必做事项列表当中！ 🌸樱花视频预览：🌸 樱花图片预览：看到... 查看详情

快速搭建一个自己的个人博客(githubpages~二次元主题)(代码片段)

...非常详细了，只要按着来就行，不过，先说明本次主题为二次元主题。如果真的喜欢本主题的不妨可以试一试（==建议跟据目录来看==）在很久很久以前。。。。嘛，就在前不久我正在。。额，上图仅仅表示我的无敌无聊，本人... 查看详情

如何突破壁障，python爬虫获取我的二次元女神(代码片段)

突破次元壁障，Python爬虫获取二次元女友前言程序说明二次元女友获取程序观察网页结构页面解析创建图片保存路径图片下载格式转换爬取结果展示完整程序前言(又到了常见的无中生友环节了)我有一个朋友，最近沉迷二... 查看详情

比b站好用，堪称二次元福音！github这款「动漫搜番」神器我爱了！

...1;大家好，我是小G。作为一个经常泡在B站追番的资深二次元用户，我一直想寻找一款能满足个人需求且用户体验好的搜番神器。终于，皇天不负有心人，今天终于让我找到了！前不久，国外一位同为二次... 查看详情

机器学习pai实战——玩转人工智能之利用gan自动生成二次元头像

前言深度学习作为人工智能的重要手段，迎来了爆发，在NLP、CV、物联网、无人机等多个领域都发挥了非常重要的作用。最近几年，各种深度学习算法层出不穷,GenerativeAdverarialNetwork(GAN)自2014年提出以来，引起广泛关注，身为深度... 查看详情

二次元动漫壁纸...2k..1080p

精美的二次元动漫壁纸可以点击我的相册查看,不定时的更新哦地址-> https://www.cnblogs.com/zhunong/gallery/1581166.html 查看详情

用css3做一个关闭icon，(代码片段)

html代码：<divclass="nav-icon"><div>合作机构授权<spanclass="close"></span></div></div>css3代码：.nav-iconposition:relative;padding:24px0;background:#ffffff;width:100%;font-fam 查看详情

less混合

...种规则集引入（混合）到另一种规则集的方法1.普通混合一个普通的css样式我们发现h1,h2的样式中有很多重复的，而解决方式如下，将重复的放在一个类中：定义一个.font_h类，在HTML文件对应的元素山添加class="font_h"属性less可以不... 查看详情

less的学习内容

...更多的事情。 LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过查看详情

less

...：在写CSS的时候，我们难免会遇到一些很麻烦的事，作为一个程序员，不断的重复同样的代码会显得自己很白痴，less很好的帮我们解决了这一问题，在Less中，我们可以直接定查看详情

基于环信的二次元恋爱互动社交开源项目---mua附源码地址

...支持开发者结合业务需要灵活自定义产品形态。Mua是一个二次元恋爱互动社交APP，有类似项目需求的创业者或想拥有甜蜜恋爱过程的开发者们都可以来44，下面介绍下这个恋爱升温神器的功能二次元恋爱开源项目——mua主... 查看详情

基于环信的二次元恋爱互动社交开源项目---mua附源码地址

程序员&二次元！他们之间有什么隐藏关联？

...个心情来说下我自己的看法。首先我本人就是一个老“二次元” ，啊称呼归称呼，像是ACG爱好者也好，亚文化爱好者、宅男也好，反正就是这么一回事。曾今也有过相当狂热的日子。抛开以前看民工漫的日子不... 查看详情

微信小程序相关css写小黄人

...mation，和一些细节做的，左边的对话框那里的小尖头也是一个重点细节下面附上代码：1<!DOCTYPEhtml>2< 查看详情

bilibili是一款怎样的产品？

...nbsp; 首先要强调，B站绝对不仅仅是一个带弹幕的二次元视频网站。 B站的流量、传播速度远超过常规网站，更准确的说，它是一个社区，具有自己的文化性格。 1. B站的核心用户群&n... 查看详情

正文

二次元的css——用div+less做一个小黄人构造器(代码片段)

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

最后加点料

后续

来自异次元的一篇博客

5亿投资a站和g站，中文在线欲借“二次元”之力敲开泛娱乐大门

唯有“商业让位艺术”可解国内二次元产业困局

用python让你完成一次绝美樱花视觉体验瞬间陷入二次元~(代码片段)

快速搭建一个自己的个人博客(githubpages~二次元主题)(代码片段)

如何突破壁障，python爬虫获取我的二次元女神(代码片段)

比b站好用，堪称二次元福音！github这款「动漫搜番」神器我爱了！

机器学习pai实战——玩转人工智能之利用gan自动生成二次元头像

二次元动漫壁纸...2k..1080p

用css3做一个关闭icon，(代码片段)

less混合

less的学习内容

less

基于环信的二次元恋爱互动社交开源项目---mua附源码地址

基于环信的二次元恋爱互动社交开源项目---mua附源码地址

程序员&二次元！他们之间有什么隐藏关联？

微信小程序相关css写小黄人

bilibili是一款怎样的产品？

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