当前位置: 首页 > Web前端 > HTML

用CSS给神经猫自慰

时间:2023-03-28 14:21:06 HTML

前言围绕着神经猫的H5小游戏火爆朋友圈。其中,神经猫廉价的表情和各种秀屁股的姿势也给用户带来了不小的品味。现在我们用CSS滚出一只小猫。从网上下载一张我们要模仿的神经猫的图片,如下:CSS实现效果图如下:虽然不能说一模一样,但至少我觉得屁股的弧度有本质(可以进一步优化)代码实现header头部不是完全圆的,加上两个三角形的耳朵,还有脸。

头部宽度不同和height,添加48%的圆角来创建一个非全圆的header.header{position:relative;宽度:75px;高度:70px;边界半径:48%;边框:1px实心#000;背景色:#fff;z-index:10;}Ear耳朵是一个只有边框的三角形。一般我们通过一个宽度为0,高度只有一个彩色边框的元素来实现一个三角形。相邻的两个边框设置为透明。生成的三角形是一个完全充满颜色的三角形。如果想实现只有边框,可以在三角形上叠加一个白色的小三角形,这样看起来就像一个只有边框的镂空三角形。.ear1{位置:绝对;左:17px;顶部:-10px;宽度:0;高度:0;border-left:5pxsolidtransparent;border-right:5pxsolidtransparent;border-bottom:15pxsolid#000;}.ear1::after{content:'';位置:绝对;左:-4px;顶部:2px;宽度:0;高度:0;border-left:4pxsolidtransparent;bottom:14pxsolid#fff;}Face脸部的元素是眼睛、眉毛和嘴巴。先实现元素,再写样式。
眼睛和眉毛都是很规则的形状,就不用多说了,嘴巴可以分解成三个弧度,那我们就画一个开口向上的弧度吧。.mouth1{宽度:14px;高度:7px;边框:1px实心#000;边界半径:0050%50%/00100%100%;border-top:none;}当高度设置为宽度的一半时,可以画一个半圆弧,可以修改高度来改变弧的大小,然后去掉上边框,实现打开向上的弧线。画出三个相对定位的圆弧,形成一个口型。Bodybody只是一个普通的矩形,元素的层级由z-index设置。body{position:absolute;左:14px;顶部:67px;宽度:55px;高度:130px;边框:1px实心#000;边界半径:20%;边框底部宽度:0;背景色:#fff;z-指数:5;.right-hand1{position:absolute;左:10px;顶部:0px;宽度:20px;高度:60px;border-right:1pxsolid#000;左边框:1pxsolid#000;变换:旋转(-45deg);bottom-right-radius:10px;}.right-hand2{position:absolute;左:9px;顶部:35px;宽度:18px;身高:60像素;border-right:1pxsolid#000;左边框:1pxsolid#000;变换:透视(14px)rotateX(-5deg)rotateZ(45deg);背景色:#fff;border-top-right-radius:10px;}.right-hand2::after{position:absolute;左:-6px;顶部:0px;内容:'';宽度:15px;高度:15px;边界半径:20px;;}.finger1{位置:绝对;左:-17px;顶部:74px;宽度:8px;高度:8px;边框:1px实心#000;边界半径:0050%50%/00100%100%;边框顶部:无;transform:rotate(140deg);}这里还是border-bottom-right-radius:10px;和border-bottom-right-radius:10px;形成一个圆角,使肘部看起来更自然一点变换:透视图(14px)略微变形,使靠近肘部的手臂更粗,手掌处的手臂更细。手指也是由几个圆弧旋转定位组成的。臀部的两个丰满臀部也是通过弧度来实现的。.buttocks1{位置:绝对;顶部:196px;左:23px;宽度:35px;高度:12px;边框:1px实心#000;边界半径:0050%50%/00100%100%;边框顶部:无;变换:旋转(-56deg);索引:6;}.buttocks2{位置:绝对;顶部:185px;左:64px;宽度:20px;高度:5px;边框:1px实心#000;边界半径:0050%50%/00100%100%;边框顶部:无;变换:旋转(-110deg);z-index:6;}Tail尾巴真的有点难处理,不能直接用弧线实现,可以上下弯曲,最后用了5个弧线来实现。。尾巴{位置:绝对;边框:1px实心#222;边界半径:0050%50%/00100%100%;border-top:none;}.tail1{left:-31px;顶部:-11px;宽度:80px;高度:8px}.tail2{左:-31px;顶部:-3px;宽度:80px;高度:8px;}.tail3{左:50px;顶部:-11px;宽度:42px;高度:9px;transform:rotate(199deg);}.tail4{left:50px;;宽度:36px;高度:7px;变换:旋转(199度);}.tail5{左:83px;顶部:3px;宽度:7px;高度:7px;大腿要粗,小腿要细。Transform:perspective()不能达到类似的效果,所以画两条线旋转定位。总结一开始看神经猫的图,感觉用CSS画起来不是很容易。花了几个小时,但完成了。不能说可以完美实现,但是相似度还是比较高的。不禁感叹,CSS真是无所不能啊!