用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脸部的元素是眼睛、眉毛和嘴巴。先实现元素,再写样式。