zoukankan      html  css  js  c++  java

  • 纯 css画小黄人

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  :before, :after {
  content: "";
  position: absolute;
}

.container {
  max-width: 550px;
  padding: 0;
  margin: 0 auto;
  min-height: 450px;
  display: inline;
  -webkit-perspective: 800px;
          perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
}

.minion {
  position: absolute;
  top: calc(48% - (250px / 2));
  left: calc(50% - (140px / 2));
  height: 250px;
  width: 140px;
}
.minion * {
  position: absolute;
}
.minion .hair {
  top: -15px;
  margin: 0;
  padding: 0;
}
.minion .hair.back li:nth-of-type(1) {
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  margin-top: 36px;
}
.minion .hair.back li:nth-of-type(2) {
  -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
  margin-top: 19px;
}
.minion .hair.back li:nth-of-type(3) {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  margin-top: 12px;
}
.minion .hair.back li:nth-of-type(4) {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
  margin-top: 3px;
}
.minion .hair.back li:nth-of-type(5) {
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
  border-left: 1px solid #333333;
  border-radius: 80% 0 0 0;
}
.minion .hair.back li:nth-of-type(6) {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  margin-top: 3px;
}
.minion .hair.back li:nth-of-type(7) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  margin-top: 12px;
}
.minion .hair.back li:nth-of-type(8) {
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  margin-top: 19px;
}
.minion .hair.back li:nth-of-type(9) {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
  margin-top: 36px;
}
.minion .hair.front {
  margin-top: 3px;
  z-index: 4;
}
.minion .hair.front li:nth-of-type(1) {
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
  margin-top: 21px;
}
.minion .hair.front li:nth-of-type(2) {
  -webkit-transform: rotate(-46deg);
          transform: rotate(-46deg);
  margin-top: 12px;
}
.minion .hair.front li:nth-of-type(3) {
  -webkit-transform: rotate(-28deg);
          transform: rotate(-28deg);
  margin-top: 7px;
}
.minion .hair.front li:nth-of-type(4) {
  -webkit-transform: rotate(-12deg);
          transform: rotate(-12deg);
  margin-top: 5px;
}
.minion .hair.front li:nth-of-type(5) {
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
  border-right: 1px solid #333333;
  border-radius: 0 80% 0 0;
  margin-top: 3px;
}
.minion .hair.front li:nth-of-type(6) {
  -webkit-transform: rotate(12deg);
          transform: rotate(12deg);
  margin-top: 6px;
}
.minion .hair.front li:nth-of-type(7) {
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
  margin-top: 7px;
}
.minion .hair.front li:nth-of-type(8) {
  -webkit-transform: rotate(46deg);
          transform: rotate(46deg);
  margin-top: 12px;
}
.minion .hair.front li:nth-of-type(9) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
  margin-top: 21px;
}
.minion .hair li {
  list-style: none;
  height: 30px;
  width: 10px;
  float: left;
}
.minion .hair li:nth-of-type(1) {
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  position: absolute;
  left: 8px;
  height: 30px;
}
.minion .hair li:nth-of-type(2) {
  -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
  left: 18px;
}
.minion .hair li:nth-of-type(3) {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  left: 30px;
}
.minion .hair li:nth-of-type(4) {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
  left: 45px;
}
.minion .hair li:nth-of-type(5) {
  left: 60px;
}
.minion .hair li:nth-of-type(6) {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  left: 76px;
}
.minion .hair li:nth-of-type(7) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  left: 93px;
}
.minion .hair li:nth-of-type(8) {
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  left: 107px;
}
.minion .hair li:nth-of-type(9) {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
  left: 119px;
  height: 30px;
}
.minion .hair li:nth-of-type(n+6) {
  border-left: 1px solid #333333;
  border-radius: 80% 0 0 0;
}
.minion .hair li:nth-of-type(-n+4) {
  border-right: 1px solid #333333;
  border-radius: 0 80% 0 0;
}
.minion .minion-body {
  position: relative;
  height: 250px;
  width: 140px;
  border-radius: 80px 80px 50px 50px;
  background: #FFCB4F;
  overflow: hidden;
}
.minion .minion-body:after, .minion .minion-body:before {
  top: 0;
  left: 0;
}
.minion .minion-body:before {
  width: 80%;
  height: 100%;
  border-radius: 20px;
  background-image: radial-gradient(rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0) 60%);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  z-index: 1;
  left: -10px;
}
.minion .minion-body:after {
  height: 250px;
  width: 140px;
  border-radius: 80px 80px 50px 50px;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(70%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
  background-image: linear-gradient(left, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  z-index: 1;
}
.minion .minion-body .dungarees-front {
  bottom: 0;
  height: 90px;
  width: 140px;
  overflow: hidden;
  border-top: 1px solid #4883b8;
}
.minion .minion-body .dungarees-front:before {
  left: -30px;
  border-radius: 0 0 35% 0;
  -webkit-box-shadow: 40px -40px 30px 40px #6D9CC6;
          box-shadow: 40px -40px 30px 40px #6D9CC6;
}
.minion .minion-body .dungarees-front:after {
  right: -30px;
  -webkit-box-shadow: -40px -40px 30px 40px #6D9CC6;
          box-shadow: -40px -40px 30px 40px #6D9CC6;
  border-radius: 0 0 0 35%;
}
.minion .minion-body .dungarees-front:before, .minion .minion-body .dungarees-front:after {
  width: 56px;
  height: 75%;
  top: 0;
  border: 1px solid #4883b8;
}
.minion .minion-body .dungarees-pocket {
  bottom: 35px;
  left: 50%;
  margin-left: -17.5px;
  height: 35px;
  width: 35px;
  border-radius: 0 0 15px 15px;
  border-left: 1px solid #4883b8;
  border-right: 1px solid #4883b8;
  border-bottom: 1px solid #4883b8;
}
.minion .minion-body .dungarees-pocket:before {
  top: -13px;
  left: -2px;
  height: 15px;
  width: 37px;
  border-bottom: 1px solid #4883b8;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 20px;
}
.minion .minion-body .dungarees-pocket .logo {
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -10.5px;
  height: 25px;
  width: 25px;
  background: #333333;
  border-radius: 50%;
}
.minion .minion-body .dungarees-pocket .logo:before {
  top: 50%;
  left: 50%;
  margin-left: -7.5px;
  margin-top: -7.5px;
  height: 15px;
  width: 15px;
  background: #6D9CC6;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.minion .minion-body .dungarees-pocket .logo:after {
  top: 50%;
  left: 50%;
  margin-left: -3.5px;
  margin-top: -3.5px;
  height: 7px;
  width: 7px;
  background: #333333;
  border-radius: 50%;
  z-index: 5;
}
.minion .minion-body .dungarees-pocket .logo span {
  height: 2px;
  background: #333333;
  border-bottom: 1px solid #6D9CC6;
  width: 12.5px;
  right: 0;
  top: 48%;
  margin-top: -1px;
  z-index: 6;
}
.minion .minion-body .dungarees-bottom {
  bottom: 0;
  height: 40px;
  width: 140px;
  background-color: #6d9cc6;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(45%, #6d9cc6), to(#4b6587));
  background-image: linear-gradient(top, #6d9cc6 45%, #4b6587 100%);
  border-top: 1px solid #4883b8;
}
.minion .minion-body .dungarees-strap {
  top: 127px;
  height: 60px;
  width: 12px;
  background: #6D9CC6;
  border: 1px solid #4883b8;
}
.minion .minion-body .dungarees-strap.left {
  left: 5px;
  -webkit-transform: rotate(-65deg);
          transform: rotate(-65deg);
}
.minion .minion-body .dungarees-strap.right {
  right: 5px;
  -webkit-transform: rotate(65deg);
          transform: rotate(65deg);
}
.minion .minion-body .dungarees-strap .button {
  bottom: 0;
  left: 2px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: #333333;
}
.minion .goggle-strap {
  top: 68px;
  height: 3px;
  background: black;
  width: 16px;
  z-index: 6;
}
.minion .goggle-strap.left {
  left: -2px;
}
.minion .goggle-strap.left:before, .minion .goggle-strap.left:after {
  border-right: 16px solid #444444;
}
.minion .goggle-strap.right {
  right: -2px;
}
.minion .goggle-strap.right:before, .minion .goggle-strap.right:after {
  border-left: 16px solid #444444;
}
.minion .goggle-strap:before, .minion .goggle-strap:after {
  height: 6px;
}
.minion .goggle-strap:before {
  top: -7px;
  border-top: 2px solid transparent;
}
.minion .goggle-strap:after {
  top: 3px;
  border-bottom: 2px solid transparent;
}
.minion .goggle-strap-link {
  top: 58px;
  height: 25px;
  width: 5px;
  background: #999999;
  z-index: 7;
}
.minion .goggle-strap-link.left {
  left: 12px;
}
.minion .goggle-strap-link.right {
  right: 12px;
}
.minion .goggle-frame {
  top: 40px;
  height: 50px;
  width: 50px;
  border: 5px solid #CCCCCC;
  border-radius: 50%;
  overflow: hidden;
  z-index: 8;
}
.minion .goggle-frame.left {
  left: 30%;
  margin-left: -30px;
}
.minion .goggle-frame.left .goggle {
  left: -1px;
}
.minion .goggle-frame.left .goggle .pupil {
  right: 40%;
}
.minion .goggle-frame.right {
  right: 30%;
  margin-right: -30px;
}
.minion .goggle-frame.right .goggle {
  right: -1px;
}
.minion .goggle-frame.right .goggle .pupil {
  left: 40%;
}
.minion .goggle-frame .goggle {
  height: 50px;
  width: 50px;
  border: 3px solid #666666;
  border-radius: 50%;
}
.minion .goggle-frame .goggle .eye {
  background: whitesmoke;
  height: 46px;
  width: 50px;
  border-radius: 50%;
  margin: 1px 0;
  -webkit-box-shadow: inset 0px 2px 10px 0px rgba(51, 51, 51, 0.5), inset 0px -1px 5px 0px rgba(51, 51, 51, 0.3);
          box-shadow: inset 0px 2px 10px 0px rgba(51, 51, 51, 0.5), inset 0px -1px 5px 0px rgba(51, 51, 51, 0.3);
}
.minion .goggle-frame .goggle .eye .pupil {
  top: 50%;
  margin: -7.5px;
  height: 15px;
  width: 15px;
  background-color: #e7a452;
  background-image: radial-gradient(#e7a452 0%, #91695c 49%, #91695c 74%, #000000 99%);
  border-radius: 50%;
}
.minion .goggle-frame .goggle .eye .pupil .dot {
  top: 50%;
  left: 50%;
  margin-top: -2.5px;
  margin-left: -2.5px;
  height: 5px;
  width: 5px;
  background: #333333;
  border-radius: 50%;
}
.minion .goggle-shadow {
  height: 75px;
  top: 45px;
  border-radius: 50%;
  background-image: radial-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 5;
}
.minion .goggle-shadow.left {
  left: 5px;
  width: 130px;
}
.minion .goggle-shadow.right {
  left: 55px;
  width: 100px;
}
.minion .mouth {
  top: 110px;
  left: 50%;
  margin-left: -30px;
  height: 20px;
  width: 60px;
  border-bottom: 2px solid #DE9A33;
  border-right: 1px solid tranparent;
  border-left: 1px solid tranparent;
  border-radius: 70%;
  z-index: 5;
  -webkit-box-shadow: inset 0 -1px 2px -1px rgba(0, 0, 0, 0.3);
          box-shadow: inset 0 -1px 2px -1px rgba(0, 0, 0, 0.3);
}
.minion .arm {
  top: 160px;
  height: 80px;
  width: 12px;
  z-index: -1;
  background: #FFCB4F;
  overflow: hidden;
}
.minion .arm.left {
  left: -12px;
  border-radius: 20px 0 0 20px / 80px 0 0 20px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.minion .arm.left:before {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(250, 250, 250, 0.3)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(left, rgba(250, 250, 250, 0.3) 20%, rgba(0, 0, 0, 0) 100%);
}
.minion .arm.right {
  right: -12px;
  border-radius: 0 20px 20px 0 / 0 80px 20px 0;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.minion .arm.right:before {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), color-stop(90%, rgba(0, 0, 0, 0)));
  background-image: linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
}
.minion .arm:before {
  height: 100%;
  width: 100%;
  filter-gradient: #000000, #000000, horizontal;
}
.minion .arm-shadow {
  top: 180px;
  height: 30px;
  width: 5px;
  border-radius: 50%;
}
.minion .arm-shadow.left {
  left: 0px;
  -webkit-box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, 0.3);
          box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
}
.minion .arm-shadow.right {
  right: 0px;
  -webkit-box-shadow: inset -2px 0 3px -1px rgba(0, 0, 0, 0.3);
          box-shadow: inset -2px 0 3px -1px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.minion .glove {
  bottom: 0;
  width: 17px;
  height: 18px;
  background: #333333;
  border-radius: 0 0 30px 30px;
}
.minion .glove.left {
  left: -14px;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.minion .glove.left:before {
  left: -2px;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}
.minion .glove.left:after {
  left: 13px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.minion .glove.left .finger {
  left: 5px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.minion .glove.right {
  right: -14px;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
.minion .glove.right:before {
  right: -2px;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
.minion .glove.right:after {
  right: 13px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.minion .glove.right .finger {
  right: 5px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.minion .glove:before {
  bottom: 0px;
  height: 20px;
  width: 10px;
  background: #333333;
  border-radius: 0 0 20px 20px;
}
.minion .glove:after {
  bottom: -4px;
  height: 20px;
  width: 10px;
  background: #333333;
  border-radius: 0 0 20px 20px;
}
.minion .glove .finger {
  bottom: -6px;
  height: 20px;
  width: 10px;
  background: #333333;
  border-radius: 0 0 20px 20px;
  z-index: 10;
}
.minion .wrist {
  height: 30px;
  width: 16px;
  border-radius: 40%;
}
.minion .wrist.front {
  bottom: 15px;
  border-bottom: 5px solid #333333;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.minion .wrist.back {
  bottom: -11px;
  border-top: 5px solid #333333;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  z-index: -2;
}
.minion .wrist.left {
  left: -19px;
}
.minion .wrist.right {
  right: -19px;
}
.minion .leg {
  bottom: -15px;
  height: 15px;
  width: 25px;
  background: #4B6587;
  z-index: -1;
  border-left: 1px solid #4883b8;
  border-right: 1px solid #4883b8;
}
.minion .leg.left {
  left: 40px;
  border-radius: 0 0 10% 20% / 0 0 80% 80%;
}
.minion .leg.left:after {
  -webkit-transform: rotate(55deg);
          transform: rotate(55deg);
  left: -12px;
}
.minion .leg.right {
  right: 40px;
  border-radius: 0 0 20% 10% / 0 0 80% 80%;
}
.minion .leg.right:after {
  -webkit-transform: rotate(-55deg);
          transform: rotate(-55deg);
  right: -12px;
}
.minion .leg:after {
  top: -10px;
  background: #4B6587;
  height: 10px;
  width: 20px;
  border-bottom: 1px solid #4883b8;
}
.minion .shoe {
  bottom: -26px;
  width: 30px;
  height: 10px;
  background: #222222;
  z-index: -2;
}
.minion .shoe.left {
  right: 74px;
  border-radius: 50px 20px 15px 10px;
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
.minion .shoe.left:before {
  right: 0px;
}
.minion .shoe.left:after {
  right: 0;
  border-radius: 10px 0 0 10px;
}
.minion .shoe.right {
  left: 74px;
  border-radius: 20px 50px 10px 15px;
  -webkit-transform: rotate(3deg);
          transform: rotate(3deg);
}
.minion .shoe.right:before {
  left: 0px;
}
.minion .shoe.right:after {
  left: 0;
  border-radius: 0 10px 10px 0;
}
.minion .shoe:before {
  top: -10px;
  height: 15px;
  width: 22px;
  background: #222222;
}
.minion .shoe:after {
  bottom: -3px;
  height: 3px;
  width: 30px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), color-stop(58%, #222222));
  background-image: linear-gradient(top, #666666 0%, #222222 58%);
}
.minion .shadow {
  bottom: -38px;
  left: -10%;
  width: 140%;
  height: 30px;
  background: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  z-index: -5;
}

.movie-logo {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 20;
}
.movie-logo img {
  margin: 0 0 -10px -10px;
  width: 150px;
  height: auto;
}
.movie-logo h1, .movie-logo h2 {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  margin: 0;
  font-size: 26px;
  letter-spacing: 1px;
  color: #666666;
  font-weight: 100;
}

  </style>
 </HEAD>

 <BODY>
 <div class="container">
    <div class="minion">
        <ul class="hair back">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="minion-body">
            <div class="dungarees-bottom"></div>
            <div class="dungarees-front"></div>
            <div class="dungarees-pocket">
                <div class="logo"><span></span></div>
            </div>
            <div class="dungarees-strap left">
                <div class="button"></div>
            </div>
            <div class="dungarees-strap right">
                <div class="button"></div>
            </div>
        </div>
        <ul class="hair front">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="goggle-strap left"></div>
        <div class="goggle-strap right"></div>
        <div class="goggle-strap-link left"></div>
        <div class="goggle-strap-link right"></div>
        <div class="goggle-frame left">
            <div class="goggle">
                <div class="eye">
                    <div class="pupil">
                        <div class="dot"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="goggle-frame right">
            <div class="goggle">
                <div class="eye">
                    <div class="pupil">
                        <div class="dot"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="goggle-shadow left"></div>
        <div class="goggle-shadow right"></div>
        <div class="mouth"></div>
        <div class="arm-shadow left"></div>
        <div class="arm-shadow right"></div>
        <div class="arm left"></div>
        <div class="arm right"></div>
        <div class="glove left">
            <div class="finger"></div>
        </div>
        <div class="glove right">
            <div class="finger"></div>
        </div>
        <div class="wrist front left"></div>
        <div class="wrist front right"></div>
        <div class="wrist back left"></div>
        <div class="wrist back right"></div>
        <div class="leg left"></div>
        <div class="leg right"></div>
        <div class="shoe left"></div>
        <div class="shoe right"></div>
        <div class="shadow"></div>
    </div>
</div>
 </BODY>
</HTML>
  • 相关阅读:
    flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array
    为什么引入进程20年后，又引入线程？
    As of Flume 1.4.0, Avro is the default RPC protocol.
    Google Protocol Buffer 的使用和原理
    Log4j 2
    统一日志 统一订单
    网站行为跟踪 Website Activity Tracking Log Aggregation 日志聚合 In comparison to log-centric systems like Scribe or Flume
    Percolator
    友盟吴磊：移动大数据平台的架构、实践与数据增值
    Twitter的RPC框架Finagle简介
  • 原文地址：https://www.cnblogs.com/sheep-fu/p/13710424.html
Copyright © 2011-2022 走看看