1. 程式人生 > 實用技巧 >純 css畫小黃人

純 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>