[分享]css3怎么画猫

CSS3是当前最新的CSS版本，它拥有更多的绘图能力和动画效果。那么，如何利用CSS3绘制一只猫呢？下面我来介绍一些方法。 / 绘制猫的身体，使用borderradius控制小圆角 / .catbod...

CSS3是当前最新的CSS版本，它拥有更多的绘图能力和动画效果。那么，如何利用CSS3绘制一只猫呢？下面我来介绍一些方法。

 /* 绘制猫的身体，使用border-radius控制小圆角 */
.cat-body {
   width: 200px;
   height: 150px;
   background-color: #F2C980;
   border-radius: 50px 50px 120px 120px;
}

/* 绘制猫的头部，使用transform控制旋转和位移，同时使用border-radius控制小圆角 */
.cat-head {
   width: 90px;
   height: 70px;
   background-color: #F2C980;
   border-radius: 50px 50px 10px 10px;
   transform: rotate(30deg) translate(70px,-35px);
}

/* 绘制猫的耳朵，利用伪元素after和before模拟 */
.cat-ear {
   position: relative;
   width: 20px;
   height: 30px;
   background-color: #F2C980;
   border-radius: 10px 10px 60px 60px;
}
.cat-ear::before {
   content: ';
   position: absolute;
   top: -9px;
   right: -2px;
   width: 0;
   height: 0;
   border: 10px solid transparent;
   border-bottom-color: #F2C980;
}
.cat-ear::after {
   content: ';
   position: absolute;
   left: -2px;
   top: -9px;
   width: 0;
   height: 0;
   border: 10px solid transparent;
   border-bottom-color: #F2C980;
}

/* 绘制猫的眼睛，利用伪元素after和before模拟 */
.cat-eye {
   position: relative;
   width: 25px;
   height: 25px;
   background-color: #fff;
   transform: rotate(45deg) translate(-10px,-10px);
}
.cat-eye::before {
   content: ';
   position: absolute;
   top: 5px;
   left: 5px;
   width: 8px;
   height: 8px;
   background-color: #000;
   border-radius: 50%;
}
.cat-eye::after {
   content: ';
   position: absolute;
   top: 5px;
   right: 5px;
   width: 8px;
   height: 8px;
   background-color: #000;
   border-radius: 50%;
}

/* 绘制猫的嘴巴，使用transform控制旋转和位移 */
.cat-mouth {
   position: relative;
   width: 40px;
   height: 20px;
   background-color: #F2C980;
   border-radius: 10px 10px 60px 60px;
   transform: rotate(10deg) translate(18px,30px);
}

/* 绘制猫的胡须，使用after和before伪元素模拟 */
.cat-whisker {
   position: relative;
   width: 50px;
   height: 1px;
   background-color: #000;
   transform: rotate(15deg) translate(-10px,12px);
}
.cat-whisker::before,
.cat-whisker::after {
   content: ';
   position: absolute;
   top: -1px;
   width: 0;
   height: 0;
   border: 5px solid transparent;
   border-right-color: #000;
}
.cat-whisker::before {
   left: -5px;
   transform: rotate(-10deg);
}
.cat-whisker::after {
   right: -5px;
   transform: rotate(10deg);
} 

综上所述，使用CSS3可以方便地绘制出各种形态的猫。通过以上代码的调整，我们可以得到更加逼真的猫咪形象。