[分享]css3卡通人物t

 CSS3 卡通人物 T

 .t{
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #F5DEB3;
      border-radius: 50%;
      overflow: hidden;
    }
    .t:before{
      content: "";
      position: absolute;
      top: 0;
      left: 5%;
      width: 90%;
      height: 50%;
      background-color: #fff;
      border-radius: 50% 50% 0 0;
      box-shadow: 0px 3px 0px #F1C40F;
    }
    .t:after{
      content: "";
      position: absolute;
      top: 25%;
      left: 45%;
      width: 10%;
      height: 10%;
      background-color: #000;
      border-radius: 50%;
      transform: rotate(-45deg);
      box-shadow: 
        35px 0px 0px #000, 
        -35px 0px 0px #000;
    }
    .t .eyes{
      position: absolute;
      top: 40%;
      left: 40%;
      width: 20%;
      height: 20%;
      background-color: #fff;
      border-radius: 50%;
      box-shadow:
        10px 0px 0px #000, 
        -10px 0px 0px #000;
    }
    .t .mouth{
      position: absolute;
      top: 70%;
      left: 45%;
      width: 10%;
      height: 10%;
      background-color: #000;
      border-radius: 50%;
    } 

这是一个使用CSS3创建的卡通人物T的代码。这个卡通人物是一个圆形，使用了圆角来实现。头部是一个白色的圆弧，在其上面添加了一些阴影来实现类似光晕的效果。眼睛是两个白色的圆形，嘴巴则是黑色的圆形。通过旋转可以实现卡通人物T的斜着摆头的效果。