用CSS來擼一隻神經貓

linshuai發表於2021-11-25
CSS

前言

之前圍住神經貓的H5小遊戲火爆了朋友圈，其中神經貓賤賤的表情，露著屁股的各種姿勢，也給使用者帶來了不少趣味。現在我們就用CSS來擼出一隻小賤貓。從網上下載一張我們要仿照的神經貓圖片，如下：

CSS實現的效果圖如下：

雖然不能說一模一樣，但至少我覺得屁股的弧度已經有了那個精髓吧（還可以再優化優化）

程式碼實現

頭部

頭部就是一個不太完全圓的圓形，加上兩個三角形耳朵，和麵部組成。

<div class="header">
    <div class="ear1"></div>
    <div class="ear2"></div>
    <!-- face -->
</div>

頭部通過寬高不同，加上48%的圓角，來打造一個非全圓的頭

.header {
    position: relative;
    width: 75px;
    height: 70px;
    border-radius: 48%;
    border: 1px solid #000;
    background-color: #fff;
    z-index: 10;
}

耳朵

耳朵是個只有邊框的三角形，一般我們實現三角形是通過一個0寬高的元素，只設定一條有顏色的邊框，相鄰的兩條邊框設為 transparent 的，這樣實現出來的三角形是一個完全填充顏色的三角形。想要實現只有邊框，可以在三角形上再疊加一個白色的小三角形，這樣看起來就像是一個鏤空的只有邊框的三角形了。

.ear1 {
    position: absolute;
    left: 17px;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 15px solid #000;
}

.ear1::after {
    content: '';
    position: absolute;
    left: -4px;
    top: 2px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 14px solid #fff;
}

臉部

臉部的元素就是眼睛、眉毛、嘴巴，先實現元素，再寫樣式。

<div class="face">
    <div class="eyebrow"></div>
    <div class="eye"></div>
    <div class="eyebrow1"></div>
    <div class="eye eye1"></div>
    <div class="mouth">
        <div class="mouth1"></div>
        <div class="mouth2"></div>
        <div class="mouth3"></div>
    </div>
</div>

眼睛、眉毛都是很規則的形狀，不用多講。嘴巴可以分解成3條弧形組成，那麼就來畫個開口向上的弧形。

.mouth1 {
    width: 14px;
    height: 7px;
    border: 1px solid #000;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
}

設定高度是寬度的一半時，就可以畫出一條半圓弧，可以修改高度來改變弧形的大小，再去掉上邊框，則實現了開口向上弧形。畫出三條弧形進行相對定位拼成嘴巴形狀。

身體

身體只是一個普通的長方形，通過 z-index 來設定元素的層級

<div class="body"></div>
.body {
    position: absolute;
    left: 14px;
    top: 67px;
    width: 55px;
    height: 130px;
    border: 1px solid #000;
    border-radius: 20%;
    border-bottom-width: 0;
    background-color: #fff;
    z-index: 5;
}

右手

右手由上臂、下臂、4根手指組成

<div class="right-hand">
    <div class="right-hand1"></div>
    <div class="right-hand2"></div>
    <div class="finger1"></div>
    <div class="finger2"></div>
    <div class="finger3"></div>
    <div class="finger4"></div>
</div>
.right-hand1 {
    position: absolute;
    left: 10px;
    top: 0px;
    width: 20px;
    height: 60px;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(-45deg);
    background-color: #fff;
    border-bottom-right-radius: 10px;
}

.right-hand2 {
    position: absolute;
    left: 9px;
    top: 35px;
    width: 18px;
    height: 60px;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    transform: perspective(14px) rotateX(-5deg) rotateZ(45deg);
    background-color: #fff;
    border-top-right-radius: 10px;
}

.right-hand2::after {
    position: absolute;
    left: -6px;
    top: 0px;
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background-color: #fff;

}

.finger1 {
    position: absolute;
    left: -17px;
    top: 74px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(140deg);
}

這裡同個 border-bottom-right-radius: 10px; 和 border-bottom-right-radius: 10px; 來形成一個圓角，讓手肘看起來比較自然一點。 transform: perspective(14px) 進行了微小的變形，讓靠近手肘的手臂粗一點，手掌的手臂細一點。手指也是通過對幾個弧線旋轉定位來組成。

臀部

兩片豐滿的臀部肉，也一樣是通過弧線來實現。

<div class="buttocks">
    <div class="buttocks1"></div>
    <div class="buttocks2"></div>
</div>
.buttocks1 {
    position: absolute;
    top: 196px;
    left: 23px;
    width: 35px;
    height: 12px;
    border: 1px solid #000;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(-56deg);
    z-index: 6;
}

.buttocks2 {
    position: absolute;
    top: 185px;
    left: 64px;
    width: 20px;
    height: 5px;
    border: 1px solid #000;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(-110deg);
    z-index: 6;
}

尾巴

尾巴確實有點難搞，無法直接一條弧線就實現，它能上彎下彎的，最後用了5條弧線來實現。

<div class="tail-wrapper">
    <div class="tail tail1"></div>
    <div class="tail tail2"></div>
    <div class="tail tail3"></div>
    <div class="tail tail4"></div>
    <div class="tail tail5"></div>
</div>
.tail{
    position: absolute;
    border: 1px solid #222;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
}
.tail1 {
    left: -31px;
    top: -11px;
    width: 80px;
    height: 8px
}
.tail2 {
    left: -31px;
    top: -3px;
    width: 80px;
    height: 8px;
}
.tail3 {
    left: 50px;
    top: -11px;
    width: 42px;
    height: 9px;
    transform: rotate(199deg);
}
.tail4 {
    left: 50px;
    top: -3px;
    width: 36px;
    height: 7px;
    transform: rotate(199deg);
}
.tail5 {
    left: 83px;
    top: 3px;
    width: 7px;
    height: 7px;
    transform: rotate(-12deg);
}

腿

最後的腿也是需要大腿粗，小腿細，transform: perspective() 無法實現到類似的效果，因此畫兩條線條旋轉定位就好。

總結

一開始看著這神經貓的圖，覺得還是不太好用 CSS 畫出來的，花了幾個小時，也是搞出來了。不能說能完美實現，但還是相似度較高吧。不禁感嘆，CSS 真是萬能的！

相關文章