【二次元的CSS】—— 用 DIV + LESS 做一個小黃人構造器

enali 發布于2019-08-02 15:54 / 1834人閱讀

摘要：僅僅使用作為身體的布局，用的各種和圓角屬性來繪制各個細節的形狀，當然也不會使用任何圖片哦。這次用到了一些的特性，通過設置一些指定的參數來生成不同種類不同身材的小黃人。

僅僅使用div作為身體的布局，用css3的各種transform和圓角屬性來繪制各個細節的形狀，當然也不會使用任何圖片哦。那就沒意思了。

有的同學說，用canvas不是能畫得更逼真而且更簡單嗎？這點我也非常贊同，但我的理由還是，那就沒意思了。

這次用到了一些LESS的特性，通過設置一些指定的參數來生成不同種類、不同身材的小黃人。

GitHub傳送門：https://github.com/lancer07/css3Minons

效果是這個樣子的

首先先做個標準版的（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);    
}

最后加點料

附加了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的，比如參數設置的過大或者過小，都會導致生成出來的小黃人亂七八糟，也歡迎大家吐槽。

GPU云服務器云服務器二次元api 二次元網站上云服務器用jsp做一個調查用php做一個網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54322.html

【二次元的CSS】—— 用 DIV + LESS 做一個小黃人構造器

摘要：僅僅使用作為身體的布局，用的各種和圓角屬性來繪制各個細節的形狀，當然也不會使用任何圖片哦。這次用到了一些的特性，通過設置一些指定的參數來生成不同種類不同身材的小黃人。僅僅使用div作為身體的布局，用css3的各種transform和圓角屬性來繪制各個細節的形狀，當然也不會使用任何圖片哦。那就沒意思了。有的同學說，用canvas不是能畫得更逼真而且更簡單嗎？這點我也非常贊同，但我的理...

Seay 2019-08-30 13:01 評論0 收藏0
SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
【二次元的CSS】—— 純CSS3做的能換擋的電扇

摘要：傳送門效果是這樣的結構小技巧就是，一開始就寫了一組單選按鈕來做開關的部分。有個地方需要優化，就是在換擋的時候，動畫應該柔和些。這次分享的電扇，和以往用css3畫人物相比多加了一點交互，就是電扇開關的地方，用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現的。 GitHub傳送門：https://github.com/lancer07/css3_fan 效...

Cruise_Chan 2019-08-02 15:54 評論0 收藏0
【二次元的CSS】—— 純CSS3做的能換擋的電扇

摘要：傳送門效果是這樣的結構小技巧就是，一開始就寫了一組單選按鈕來做開關的部分。有個地方需要優化，就是在換擋的時候，動畫應該柔和些。這次分享的電扇，和以往用css3畫人物相比多加了一點交互，就是電扇開關的地方，用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現的。 GitHub傳送門：https://github.com/lancer07/css3_fan 效...

big_cat 2019-08-30 13:03 評論0 收藏0