[分享]css3怎么画叮当猫

叮当猫是一只非常可爱的动漫人物，有很多人喜欢它。现在，我们来学习如何使用CSS3来画一只可爱的叮当猫。/先创建一个div来作为我们画图的区域/ /设置div的样式，包括大小和背景色/ .cat { ...

叮当猫是一只非常可爱的动漫人物，有很多人喜欢它。现在，我们来学习如何使用CSS3来画一只可爱的叮当猫。

/*先创建一个div来作为我们画图的区域*/
<div class="cat"></div>

/*设置div的样式，包括大小和背景色*/
.cat {
  width: 300px;
  height: 300px;
  background: #f1c40f;
}

/*现在，我们开始画叮当猫的脸*/
/*首先画出猫脸的圆形*/
.cat:before {
  content: "";
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: white;
}

/*接下来，画出猫的耳朵*/
.cat:after {
  content: "";
  position: absolute;
  top: 30px;
  left: 100px;
  width: 0;
  height: 0;
  border-top: 50px solid white;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}
.cat:after {
  content: "";
  position: absolute;
  top: 30px;
  left: 170px;
  width: 0;
  height: 0;
  border-top: 50px solid white;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

/*接下来，画出猫的眼睛*/
.cat:before {
  content: "";
  position: absolute;
  top: 100px;
  left: 80px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: black;
}
.cat:before {
  content: "";
  position: absolute;
  top: 100px;
  left: 170px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: black;
}

/*接下来，画出猫的鼻子*/
.cat:before {
  content: "";
  position: absolute;
  top: 150px;
  left: 120px;
  width: 60px;
  height: 40px;
  border-radius: 50%;
  background: pink;
}

/*最后,画出猫的嘴巴*/
.cat:before {
  content: "";
  position: absolute;
  top: 170px;
  left: 90px;
  width: 100px;
  height: 50px;
  border-radius: 50% / 25%;
  border-top: 3px solid black;
} 

代码完成后，你就可以在页面上看到一只可爱的叮当猫了。