真强啊！纯 CSS 撸一个小黄人
这样的小黄人，谁不喜欢呢？
源代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
body{display:flex;justify-content:center;margin-top:200px;background-color:#fff;}
:before, :after { content:""; position:absolute; } .container { max-width:550px; padding:0; margin:0 auto; min-height:450px; display:inline; perspective:800px; 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) { transform:rotate(-70deg); margin-top:36px; } .minion .hair.back li:nth-of-type(2) { transform:rotate(-50deg); margin-top:19px; } .minion .hair.back li:nth-of-type(3) { transform:rotate(-30deg); margin-top:12px; } .minion .hair.back li:nth-of-type(4) { transform:rotate(-10deg); margin-top:3px; } .minion .hair.back li:nth-of-type(5) { transform:rotate(2deg); border-left:1px solid #333333; border-radius:80% 0 0 0; } .minion .hair.back li:nth-of-type(6) { transform:rotate(10deg); margin-top:3px; } .minion .hair.back li:nth-of-type(7) { transform:rotate(30deg); margin-top:12px; } .minion .hair.back li:nth-of-type(8) { transform:rotate(50deg); margin-top:19px; } .minion .hair.back li:nth-of-type(9) { transform:rotate(70deg); margin-top:36px; } .minion .hair.front { margin-top:3px; z-index:4; } .minion .hair.front li:nth-of-type(1) { transform:rotate(-60deg); margin-top:21px; } .minion .hair.front li:nth-of-type(2) { transform:rotate(-46deg); margin-top:12px; } .minion .hair.front li:nth-of-type(3) { transform:rotate(-28deg); margin-top:7px; } .minion .hair.front li:nth-of-type(4) { transform:rotate(-12deg); margin-top:5px; } .minion .hair.front li:nth-of-type(5) { 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) { transform:rotate(12deg); margin-top:6px; } .minion .hair.front li:nth-of-type(7) { transform:rotate(28deg); margin-top:7px; } .minion .hair.front li:nth-of-type(8) { transform:rotate(46deg); margin-top:12px; } .minion .hair.front li:nth-of-type(9) { transform:rotate(60deg); margin-top:21px; } .minion .hair li { list-style:none; height:30px; width:10px; float:left; } .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 .minody { position:relative; height:250px; width:140px; border-radius:80px 80px 50px 50px; background:#FFCB4F; overflow:hidden; } .minion .minody:after, .minion .minody:before { top:0; left:0; } .minion .minody: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%); filter:blur(5px); z-index:1; left:-10px; } .minion .minody:after { height:250px; width:140px; border-radius:80px 80px 50px 50px; background-image:linear-gradient(left, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%); filter:blur(5px); z-index:1; } .minion .minody .dunfrt { bottom:0; height:90px; width:140px; overflow:hidden; border-top:1px solid #4883b8; } .minion .minody .dunfrt:before { left:-30px; border-radius:0 0 35% 0; box-shadow:40px -40px 30px 40px #6D9CC6; } .minion .minody .dunfrt:after { right:-30px; box-shadow:-40px -40px 30px 40px #6D9CC6; border-radius:0 0 0 35%; } .minion .minody .dunfrt:before, .minion .minody .dunfrt:after { width:56px; height:75%; top:0; border:1px solid #4883b8; } .minion .minody .dunpet { 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 .minody .dunpet: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 .minody .dunpet .logo { top:50%; left:50%; margin-left:-12.5px; margin-top:-10.5px; height:25px; width:25px; background:#333333; border-radius:50%; } .minion .minody .dunpet .logo:before { top:50%; left:50%; margin-left:-7.5px; margin-top:-7.5px; height:15px; width:15px; background:#6D9CC6; transform:rotate(45deg); } .minion .minody .dunpet .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 .minody .dunpet .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 .minody .dunbtm { bottom:0; height:40px; width:140px; background-color:#6d9cc6; background-image:linear-gradient(top, #6d9cc6 45%, #4b6587 100%); border-top:1px solid #4883b8; } .minion .minody .dunsap { top:127px; height:60px; width:12px; background:#6D9CC6; border:1px solid #4883b8; } .minion .minody .dunsap.left { left:5px; transform:rotate(-65deg); } .minion .minody .dunsap.right { right:5px; transform:rotate(65deg); } .minion .minody .dunsap .button { bottom:0; left:2px; height:8px; width:8px; border-radius:50%; background:#333333; } .minion .hair li:nth-of-type(1) { transform:rotate(-70deg); position:absolute; left:8px; height:30px; } .minion .hair li:nth-of-type(2) { transform:rotate(-50deg); left:18px; } .minion .hair li:nth-of-type(3) { transform:rotate(-30deg); left:30px; } .minion .hair li:nth-of-type(4) { transform:rotate(-10deg); left:45px; } .minion .hair li:nth-of-type(5) { left:60px; } .minion .hair li:nth-of-type(6) { transform:rotate(10deg); left:76px; } .minion .hair li:nth-of-type(7) { transform:rotate(30deg); left:93px; } .minion .hair li:nth-of-type(8) { transform:rotate(50deg); left:107px; } .minion .hair li:nth-of-type(9) { transform:rotate(70deg); left:119px; height:30px; } .minion .gorap { top:68px; height:3px; background:black; width:16px; z-index:6; } .minion .gorap.left { left:-2px; } .minion .gorap.left:before, .minion .gorap.left:after { border-right:16px solid #444444; } .minion .gorap.right { right:-2px; } .minion .gorap.right:before, .minion .gorap.right:after { border-left:16px solid #444444; } .minion .gorap:before, .minion .gorap:after { height:6px; } .minion .gorap:before { top:-7px; border-top:2px solid transparent; } .minion .gorap:after { top:3px; border-bottom:2px solid transparent; } .minion .gorlnk { top:58px; height:25px; width:5px; background:#999999; z-index:7; } .minion .gorlnk.left { left:12px; } .minion .gorlnk.right { right:12px; } .minion .gofme { top:40px; height:50px; width:50px; border:5px solid #CCCCCC; border-radius:50%; overflow:hidden; z-index:8; } .minion .gofme.left { left:30%; margin-left:-30px; } .minion .gofme.left .goggle { left:-1px; } .minion .gofme.left .goggle .pupil { right:40%; } .minion .gofme.right { right:30%; margin-right:-30px; } .minion .gofme.right .goggle { right:-1px; } .minion .gofme.right .goggle .pupil { left:40%; } .minion .gofme .goggle { height:50px; width:50px; border:3px solid #666666; border-radius:50%; } .minion .gofme .goggle .eye { background:whitesmoke; height:46px; width:50px; border-radius:50%; margin:1px 0; 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 .gofme .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 .gofme .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 .gogdow { 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 .gogdow.left { left:5px; width:130px; } .minion .gogdow.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; 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; transform:rotate(0deg); } .minion .arm.left:before { 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; transform:rotate(0deg); } .minion .arm.right:before { 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 .shoe { bottom:-26px; width:30px; height:10px; background:#222222; z-index:-2; } .minion .shoe.left { right:74px; border-radius:50px 20px 15px 10px; 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; transform:rotate(3deg); } .minion .shoe.right:before { left:0px; } .minion .shoe.right:after { left:0; border-radius:0 10px 10px 0; } .minion .ardow { top:180px; height:30px; width:5px; border-radius:50%; } .minion .ardow.left { left:0px; box-shadow:inset 2px 0 3px -1px rgba(0, 0, 0, 0.3); transform:rotate(5deg); } .minion .ardow.right { right:0px; box-shadow:inset -2px 0 3px -1px rgba(0, 0, 0, 0.3); transform:rotate(-5deg); } .minion .glove { bottom:0; width:17px; height:18px; background:#333333; border-radius:0 0 30px 30px; } .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 { transform:rotate(55deg); left:-12px; } .minion .leg.right { right:40px; border-radius:0 0 20% 10% / 0 0 80% 80%; } .minion .leg.right:after { transform:rotate(-55deg); right:-12px; } .minion .leg:after { top:-10px; background:#4B6587; height:10px; width:20px; border-bottom:1px solid #4883b8; } .minion .glove.left { left:-14px; transform:rotate(-10deg); } .minion .glove.left:before { left:-2px; transform:rotate(20deg); } .minion .glove.left:after { left:13px; transform:rotate(-30deg); } .minion .glove.left .finger { left:5px; transform:rotate(0deg); } .minion .glove.right { right:-14px; transform:rotate(10deg); } .minion .glove.right:before { right:-2px; transform:rotate(-20deg); } .minion .glove.right:after { right:13px; transform:rotate(30deg); } .minion .glove.right .finger { right:5px; transform:rotate(0deg); } .minion .shoe:before { top:-10px; height:15px; width:22px; background:#222222; } .minion .shoe:after { bottom:-3px; height:3px; width:30px; 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; }
</style>
<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="minody">
<div class="dunbtm"></div>
<div class="dunfrt"></div>
<div class="dunpet">
<div class="logo"><span></span></div>
</div>
<div class="dunsap left">
<div class="button"></div>
</div>
<div class="dunsap 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="gorap left"></div>
<div class="gorap right"></div>
<div class="gorlnk left"></div>
<div class="gorlnk right"></div>
<div class="gofme left">
<div class="goggle">
<div class="eye">
<div class="pupil">
<div class="dot"></div>
</div>
</div>
</div>
</div>
<div class="gofme right">
<div class="goggle">
<div class="eye">
<div class="pupil">
<div class="dot"></div>
</div>
</div>
</div>
</div>
<div class="gogdow left"></div>
<div class="gogdow right"></div>
<div class="mouth"></div>
<div class="ardow left"></div>
<div class="ardow 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>
<script type="module">
</script>
</html>