纯CSS3 人物肖像 - 乔巴

开心的乔巴，不过当你鼠标移动到乔巴脸部时，乔巴会嚎啕大哭。

cartoon,laugh,cry

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1736
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html, body {
  width: 100%;
  height: 100%; }

* {
  transition: all ease 0.1s; }

ul {
  list-style: none;
  margin: 0;
  padding: 0; }

.reverse {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg); }

.chopper-container {
  position: relative;
  width: 768px;
  height: 768px;
  margin: 15% auto; }

.chopper-antlers {
  width: 20%;
  height: 12%;
  border: 5px solid #000;
  border-top: 0;
  border-radius: 50% / 20% 20% 80% 62%;
  background: #82603b; }

.chopper-antlers:before {
  position: absolute;
  top: -3%;
  left: 48%;
  width: 15%;
  height: 33%;
  border: 6px solid #000;
  border-top: 0;
  border-radius: 0 0 46% 45%;
  background: #fff;
  z-index: 99;
  content: ''; }

.chopper-antlers:after {
  position: absolute;
  top: 23%;
  left: 0;
  width: 95%;
  height: 58%;
  border-radius: 50% 40% 43% 95%;
  background: #82603b;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  z-index: 9;
  content: ''; }

.chopper-antlers-left {
  position: absolute;
  top: 0;
  left: 10%; }

.chopper-antlers-right {
  position: absolute;
  top: 0;
  right: 8%;
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-ransform: scaleX(-1);
  -o-ransform: scaleX(-1);
  z-index: 9; }

.chopper-antlers li {
  position: absolute;
  display: inline-block;
  top: 80%;
  width: 25%;
  height: 120%;
  border-radius: 30%;
  background: #82603b;
  z-index: 9; }

.chopper-antlers-left li {
  box-shadow: 6px 0 0 0 #000 inset, -6px 0 0 0 #000 inset, 0 6px 0 0 #000 inset; }

.chopper-antlers-left li:nth-child(2), .chopper-antlers-left li:nth-child(3), .chopper-antlers-left li:nth-child(5) {
  box-shadow: 6px 0 0 0 #000 inset, -6px 0 0 0 #000 inset, 0 6px 0 0 #000 inset, -5px 8px 0 0 rgba(0, 0, 0, .2); }

.chopper-antlers-right li {
  box-shadow: 6px 0 0 0 #000 inset, -6px 0 0 0 #000 inset, 0 6px 0 0 #000 inset, 11px 0 0 0 rgba(0, 0, 0, .2) inset; }

.chopper-antlers li:first-child {
  top: -58%;
  left: -7%;
  border-radius: 50% 10% 0 40%;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg); }

.chopper-antlers li:nth-child(2) {
  top: -69%;
  left: 10%;
  border-radius: 50% 10% 0 40%; }

.chopper-antlers li:nth-child(3) {
  top: -76%;
  left: 27%;
  border-radius: 50% 15% 10% 40%; }

.chopper-antlers li:nth-child(4) {
  top: -72%;
  left: 67%;
  height: 110%;
  border-radius: 30% 40% 40% 10%;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg); }

.chopper-antlers li:nth-child(5) {
  top: -64%;
  left: 85%;
  height: 125%;
  border-radius: 30% 40% 45% 30%;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg); }

.chopper-antlers li:last-child {
  top: 74%;
  left: 79%;
  width: 20%;
  height: 70%;
  border-left: 6px solid #000;
  border-right: 6px solid #000;
  border-radius: 0;
  box-shadow: none;
  -webkit-transform: rotate(-37deg);
  -moz-transform: rotate(-37deg);
  -ms-transform: rotate(-37deg);
  -o-transform: rotate(-37deg);
  z-index: 9; }

.chopper-hat-top, .chopper-hat-body, .chopper-hat-brim {
  background: #e9746d; }

.chopper-hat {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%; }

.chopper-hat-top {
  position: absolute;
  top: 0;
  left: 30%;
  width: 40%;
  height: 50%;
  border-right: 6px solid #000;
  border-left: 6px solid #000; }

.chopper-hat-top:before {
  position: absolute;
  top: -65%;
  left: -2%;
  width: 100.1%;
  height: 65%;
  border: 6px solid #000;
  border-radius: 50% / 80% 80% 10% 10%;
  background: #e9746d;
  z-index: -9;
  content: ''; }

.chopper-hat-x {
  width: 36%;
  height: 36%;
  margin: auto;
  background: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  box-shadow: 0 0 0 6px #000 inset; }

.chopper-hat-x:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background: #fff;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  box-shadow: 0 0 0 6px #000 inset;
  z-index: 999999;
  content: ''; }

.chopper-hat-x:after {
  position: absolute;
  top: 15%;
  left: 30%;
  width: 43%;
  height: 71%;
  background: #fff;
  z-index: 999999;
  content: ''; }

.chopper-hat-shadow {
  position: absolute;
  top: -10%;
  left: 0;
  width: 53%;
  height: 95%;
  border-radius: 83% 50% 30% 185%;
  background: rgba(0, 0, 0, .3);
  -webkit-transform: matrix(0, 1.411, 1.611, -0.278, 1, 9);
  -moz-transform: matrix(0, 1.411, 1.611, -0.278, 1, 9);
  -ms-transform: matrix(0, 1.411, 1.611, -0.278, 1, 9);
  -o-transform: matrix(0, 1.411, 1.611, -0.278, 1, 9); }

.chopper-hat-brim {
  overflow: hidden;
  position: absolute;
  top: 30%;
  left: 15%;
  width: 70%;
  height: 90%;
  margin: auto;
  border: 6px solid #000;
  border-radius: 50% / 50% 50% 35% 35%;
  z-index: 99; }

.chopper-hat-brim:before {
  position: absolute;
  top: 15%;
  left: -1%;
  width: 100%;
  height: 80%;
  border: 6px solid #000;
  border-radius: 50% / 70% 70% 20% 20%;
  background: #94474d;
  z-index: 99;
  content: ''; }

.chopper-hat-brim-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 80%;
  border-radius: 0 30% 0 0;
  background: rgba(0, 0, 0, .3); }

.chopper-face {
  position: absolute;
  top: 20.5%;
  left: 30%;
  width: 39%;
  height: 15%;
  border: 6px solid #000;
  border-radius: 60% / 60% 60% 30% 30%;
  background: #dfb47d;
  box-shadow: 0 20px 0 rgba(0, 0, 0, .2) inset;
  z-index: 99;
  cursor: pointer; }

.chopper-face:before {
  position: absolute;
  top: 50%;
  left: -2%;
  width: 100%;
  height: 40%;
  border-right: 6px solid #000;
  border-left: 6px solid #000;
  background: #dfb47d;
  z-index: 999;
  content: ''; }

.chopper-face:after {
  position: absolute;
  top: 60%;
  left: -2%;
  width: 100%;
  height: 125%;
  border-radius: 45% / 20% 20% 80% 80%;
  border: 6px solid #000;
  background: #dfb47d;
  z-index: 99;
  content: ''; }

.chopper-face-bottom {
  width: 29.5%;
  height: 30%;
  margin: -15% auto;
  border-radius: 500% 0 350% 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg); }

.chopper-eye {
  position: absolute;
  top: 33%;
  width: 20%;
  height: 55%;
  border: 6px solid #000;
  border-radius: 50%;
  background: #fff;
  z-index: 9999; }

.chopper-eye:before {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: #000;
  z-index: 9;
  content: ''; }

.chopper-left-eye {
  left: 10%; }

.chopper-right-eye {
  right: 10%; }

.chopper-face:hover .chopper-eye {
  border-color: #fff; }

.chopper-face:hover .chopper-eye li {
  position: absolute;
  width: 25%;
  height: 25%;
  border-radius: 50%; }

.chopper-eye .white li {
  background: #fff; }

.chopper-eye .white li:first-child {
  top: 22%;
  left: -22%;
  width: 60%;
  height: 60%; }

.chopper-eye .white li:nth-child(2) {
  top: 85%;
  left: 10%;
  width: 20%;
  height: 50%; }

.chopper-eye .white li:nth-child(3) {
  top: -13%;
  left: -2%;
  width: 72%;
  height: 55%; }

.chopper-eye .white li:nth-child(4) {
  top: -12%;
  left: 52%;
  width: 65%;
  height: 70%; }

.chopper-eye .white li:nth-child(5) {
  top: 82%;
  left: 60%;
  width: 27%;
  height: 45%;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg); }

.chopper-eye .white li:last-child {
  top: 50%;
  left: 60%;
  width: 52%;
  height: 50%; }

.chopper-eye .black li {
  background: #000; }

.chopper-eye .black li:first-child {
  top: 6%;
  left: 2%;
  width: 70%;
  height: 60%; }

.chopper-eye .black li:nth-child(2) {
  top: 12%;
  left: 46%;
  width: 52%;
  height: 60%; }

.chopper-eye .black li:nth-child(3) {
  top: 58%;
  left: 30%;
  width: 35%;
  height: 35%; }

.chopper-eye .black li:nth-child(4) {
  top: 50%;
  left: 10%;
  width: 35%;
  height: 35%; }

.chopper-eye .black li:nth-child(5) {
  top: 52%;
  left: 52%;
  width: 35%;
  height: 35%; }

.chopper-eye.mirror {
  -webkit-transform: scaleX(-1) rotate(20deg);
  -moz-transform: scaleX(-1) rotate(20deg);
  -ms-ransform: scaleX(-1) rotate(20deg);
  -o-ransform: scaleX(-1) rotate(20deg); }

.chopper-nose {
  position: absolute;
  top: 77%;
  left: 43%;
  width: 10%;
  height: 15%;
  border: 6px solid #000;
  border-radius: 60% / 40% 40% 100% 100%;
  background: #41588c;
  z-index: 99999; }

.chopper-face:hover .chopper-nose li {
  display: block;
  position: absolute;
  top: 128%;
  left: 88%;
  width: 50%;
  height: 80%;
  border-radius: 50% / 30% 30% 70% 70%;
  -webkit-transform: skew(10deg, 30deg);
  -moz-transform: skew(10deg, 30deg);
  -ms-transform: skew(10deg, 30deg);
  -o-transform: skew(10deg, 30deg);
  background: #fff; }

.chopper-face:hover .chopper-nose:before {
  position: absolute;
  top: 120%;
  left: 50%;
  height: 200%;
  border-left: 1px solid #000;
  background: #000;
  content: ''; }

.chopper-nose:after {
  position: absolute;
  top: 11%;
  left: 7%;
  width: 26%;
  height: 35%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  content: ''; }

.chopper-lip {
  position: absolute;
  top: 74%;
  width: 20%;
  height: 50%;
  border-right: 6px solid #000;
  border-bottom: 6px solid #000;
  background: #dfb47d;
  z-index: 1000; }

.chopper-lip:before {
  position: absolute;
  top: -20%;
  left: -60%;
  width: 180%;
  height: 80%;
  background: #dfb47d;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  z-index: 1002;
  content: ''; }

.chopper-left-lip {
  left: 29.5%;
  border-radius: 50%;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg); }

.chopper-right-lip {
  right: 29%;
  border-radius: 50%;
  -webkit-transform: rotate(55deg);
  -moz-transform: rotate(55deg);
  -ms-transform: rotate(55deg);
  -o-transform: rotate(55deg); }

.chopper-mouth {
  overflow: hidden;
  position: absolute;
  top: 101%;
  left: 39.5%;
  width: 17%;
  height: 80%;
  border: 6px solid #000;
  border-radius: 50% / 30% 30% 70% 70%;
  background: #7e4031;
  z-index: 999; }

.chopper-mouth:after {
  position: absolute;
  top: 36%;
  left: -18%;
  width: 120%;
  height: 80%;
  border-radius: 45%;
  border: 6px solid #000;
  background: #df8968;
  content: ''; }

.chopper-face:hover .chopper-mouth {
  top: 120%;
  left: 0;
  width: 95%;
  height: 45%;
  border-radius: 42%; }

.chopper-face:hover .chopper-lip {
  display: none; }

.chopper-face:hover .chopper-lip-cry {
  position: absolute;
  top: 92%;
  left: 25%;
  width: 50%;
  height: 80%;
  border-top: 3px solid #000;
  border-radius: 50%;
  z-index: 9999; }

.chopper-face:hover .chopper-lip-cry:before {
  position: absolute;
  top: 20%;
  left: -9%;
  width: 120%;
  height: 25%;
  border-bottom: 2px solid #000;
  border-radius: 50% / 30% 30% 80% 70%;
  background: #dfb47d;
  content: ''; }

.chopper-face:hover .chopper-lip-cry:after {
  position: absolute;
  top: 80%;
  left: 6%;
  width: 90%;
  height: 30%;
  border-top: 2px solid #000;
  border-radius: 50% / 80% 80% 10% 10%;
  background: #dfb47d;
  content: ''; }

.chopper-face:hover .chopper-mouth {
  overflow: hidden;
  border-width: 1px;
  border-radius: 50% / 50% 50% 30% 30%;
  box-shadow: 0 0 0 8px #dfb47d, 0 0 0 10px #000;
  background: #fff; }

.chopper-face:hover .chopper-mouth:after {
  display: none; }

.chopper-face:hover .chopper-mouth ul {
  width: 100%;
  height: 100%; }

.chopper-face:hover .chopper-mouth ul:before {
  display: block;
  position: absolute;
  top: 43%;
  left: 0;
  width: 100%;
  height: 22%;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  background: #7c412f;
  content: ''; }

.chopper-face:hover .chopper-mouth ul:after {
  display: block;
  position: absolute;
  top: 44%;
  left: 22%;
  width: 60%;
  height: 22%;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-radius: 50% / 80% 80% 20% 20%;
  background: #df8968;
  content: ''; }

.chopper-face:hover .chopper-mouth li:first-child {
  border: 0; }

.chopper-face:hover .chopper-mouth li {
  display: inline-block;
  width: 11.8%;
  height: 100%;
  border-left: 3px solid #000;
  z-index: 99999999; }

HTML

<div class="chopper-container">
  <ul class="chopper-antlers chopper-antlers-left">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul class="chopper-antlers chopper-antlers-right">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="chopper-hat">
    <div class="chopper-hat-top">
      <div class="chopper-hat-x"></div>
      <div class="chopper-hat-shadow"></div>
    </div>
    <div class="chopper-hat-brim">
      <div class="chopper-hat-brim-shadow"></div>
    </div>
  </div>
  <div class="chopper-face">
    <div class="chopper-eye chopper-left-eye">
      <ul class="white">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="black">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="chopper-eye chopper-right-eye mirror">
      <ul class="white">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="black">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="chopper-nose">
      <ul>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="chopper-lip-cry"></div>
    <div class="chopper-lip chopper-left-lip"></div>
    <div class="chopper-lip chopper-right-lip"></div>
    <div class="chopper-mouth">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>

开心的乔巴，不过当你鼠标移动到乔巴脸部时，乔巴会嚎啕大哭。

cartoon,laugh,cry

编辑器支持Emmet

快捷键

开心的乔巴，不过当你鼠标移动到乔巴脸部时，乔巴会嚎啕大哭。

cartoon,laugh,cry

纯CSS3实现的卡通人物的眼睛

CSS3 迪士尼米老鼠卡通肖像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：