css做出来的动漫人物

  CSS 能做出令人叹为观止的动漫人物,让我们一起来欣赏吧!下面是一份典型的 CSS 代码

body {
  background-color: #EEE;
}

.head {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FFDAB9;
  position: absolute;
  top: 50px;
  left: 50px;
  Box-shadow: 0 0 20px rgba(0,0.5);
  transform: rotate(45deg);
  transform-origin: center center;
}

.eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 40px;
  left: 45px;
}

.eye::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  top: 5px;
  left: 5px;
}

.mouth {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  top: 75px;
  left: 55px;
  border: 5px solid #000;
  transform-origin: center bottom;
  transform: skewY(-20deg);
}

.mouth::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 10px;
  left: 10px;
}

.hair {
  width: 70px;
  height: 70px;
  background-color: #A52A2A;
  position: absolute;
  top: 30px;
  left: 30px;
  transform: rotate(-45deg);
  transform-origin: bottom center;
  Box-shadow: 0 0 10px rgba(0,0.5);
}

.hair::before,.hair::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: #A52A2A;
  position: absolute;
  top: -50px;
  left: 10px;
  transform: rotate(45deg);
  transform-origin: bottom center;
  Box-shadow: 0 0 10px rgba(0,0.5);
}

.hair::after {
  top: -65px;
  left: 25px;
  transform: rotate(-45deg);
  transform-origin: bottom center;
  Box-shadow: 0 0 10px rgba(0,0.5);
}

.tie {
  width: 30px;
  height: 30px;
  background-color: #FF0000;
  position: absolute;
  top: 130px;
  left: 70px;
  border-radius: 50%;
  border: 5px solid #000;
  transform: rotate(-45deg);
  transform-origin: center center;
}

css做出来的动漫人物

  这段代码能够生成一个有趣的、萌萌哒的动漫人物。如果你喜欢 CSS,相信你也能创造出更多惊艳的创作。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效