用CSS来撸一只神经猫

前言

之前围住神经猫的H5小游戏火爆了朋友圈,其中神经猫贱贱的表情,露着屁股的各种姿势,也给用户带来了不少趣味。现在我们就用CSS来撸出一只小贱猫。从网上下载一张我们要仿照的神经猫图片,如下:
用CSS来撸一只神经猫_第1张图片

CSS实现的效果图如下:
用CSS来撸一只神经猫_第2张图片

虽然不能说一模一样,但至少我觉得屁股的弧度已经有了那个精髓吧(还可以再优化优化)

代码实现

头部

头部就是一个不太完全圆的圆形,加上两个三角形耳朵,和面部组成。

头部通过宽高不同,加上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;
}

脸部

脸部的元素就是眼睛、眉毛、嘴巴,先实现元素,再写样式。

眼睛、眉毛都是很规则的形状,不用多讲。嘴巴可以分解成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 来设置元素的层级

.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根手指组成

.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) 进行了微小的变形,让靠近手肘的手臂粗一点,手掌的手臂细一点。手指也是通过对几个弧线旋转定位来组成。

臀部

两片丰满的臀部肉,也一样是通过弧线来实现。

.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条弧线来实现。

.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 真是万能的!

你可能感兴趣的