大家好，今天我要给大家介绍一个超级有趣的网页项目——乐高个性化小人生成器！这个项目可以让你随心所欲地定制属于自己的乐高小人，让它们拥有独一无二的表情和配色。
功能亮点
多样表情：提供了多种表情选择，从经典微笑到惊讶表情，应有尽有，让你的小人更有个性。
颜色调整：你可以自由调整上半身和下半身的颜色，包括色调、饱和度和亮度，让你的小人更加炫酷。
随机生成：一键随机生成功能，轻松搞定搭配烦恼，直接看看系统给你的惊喜组合。
爆炸效果：点击“Explode”按钮，你的小人会瞬间“爆炸”成零件，再次点击还能重新组装，趣味十足。
压缩版源码（复制另存index.html文件即可运行 ）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet"><link rel="stylesheet" href="style.css"><title>个性化乐高小人生成器</title><style> html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit;padding:0;margin:0}body{display:flex;height:100vh;font-family:Montserrat,sans-serif}.minifigure{position:relative;width:300px;height:485px;margin:auto;perspective:200;transform-style:preserve-3d;transition:transform 400ms}.minifigure.explode{transform:scale(0.75) translateZ(0)}.head{position:absolute;z-index:2;top:2.25em;left:50%;width:7.25em;height:6.25em;transform:translateX(-50%);color:hsla(50,90%,50%,1);background-color:currentColor;background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,0.15) 95%,rgba(0,0,0,0.3)),linear-gradient(to right,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2),rgba(255,255,255,0));border-radius:1.5em;transition:transform 400ms}.explode .head{transform:translate(-50%,-8em)}.head::before,.head::after{content:'';position:absolute;left:50%;height:2em;transform:translateX(-50%);background-color:currentColor}.head::before{top:-1.25em;width:3.5em;height:1.25em;background-image:linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0) 30%),linear-gradient(to right,rgba(255,255,255,0) 70%,rgba(255,255,255,0.25) 80%,rgba(255,255,255,0) 90%);border-radius:.25em .25em 0 0}.head::after{bottom:-0.875em;width:4.5em;height:1em;background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.05) 50%),linear-gradient(to right,rgba(255,255,255,0) 70%,rgba(255,255,255,0.25) 80%,rgba(255,255,255,0) 90%);border-radius:0 0 .125em .125em}.faces-wrap{height:100%;overflow:hidden}.faces{display:flex;transition:transform 400ms cubic-bezier(0,0,0,1.25)}.explode .faces{transform:translateX(-500%)!important}.face{position:relative;flex:1 0 100%}.eye{position:absolute;top:2.25em;width:.75em;height:.9375em;color:#fff;background-color:currentColor;border-radius:50%;box-shadow:inset 0 -0.125em 0 .25em #000}.eye::before{content:'';position:absolute;left:50%;color:#000;transform:translateX(-50%)}.eye.right{left:2.25em}.eye.left{right:2.25em}.classic .eye{top:2.4375em;height:.75em;color:#000;box-shadow:none}.large-smile .eye{top:2em}.worried .eye,.surprised .eye{top:2.4375em;width:1em;height:1.125em;box-shadow:inset 0 -0.125em 0 .3125em #000}.worried .eye.right{left:2.125em}.worried .eye.left{right:2.125em}.frown .eye{top:2.625em}.frown .eye::before{bottom:80%;width:1.25em;height:1em;border:.1875em solid transparent;border-bottom-color:currentColor;border-radius:50%}.frown .eye.right::before{margin-left:-0.25em;transform:translateX(-50%) rotate(-20deg)}.frown .eye.left::before{margin-left:.25em;transform:translateX(-50%) rotate(20deg)}.brow{position:absolute;bottom:.625em;left:50%;width:1.75em;height:1em;transform-origin:0 0;transform:translateX(-50%);color:#000;border:.25em solid transparent;border-top-color:currentColor;border-bottom:0;border-radius:50% 50% 0 0}.right .brow{border-left:none}.left .brow{border-right:0}.large-smile .brow{bottom:.375em;width:1.25em;height:1.375em;border:0;border-top:.25em solid;border-radius:50% 50% 0 0}.large-smile .right .brow{margin-left:-0.125em;transform:skewY(-10deg) translateX(-50%) translateZ(0)}.large-smile .left .brow{margin-left:.125em;transform:skewY(10deg) translateX(-50%) translateZ(0)}.worried .brow{width:1.25em;height:.875em;bottom:1.25em;border-top:0;border-bottom:.25em solid currentColor;border-radius:0 0 50% 50%}.worried .right .brow{margin-left:-0.25em;transform:rotate(-20deg) translateX(-50%) translateZ(0)}.worried .left .brow{margin-left:.25em;transform:rotate(20deg) translateX(-50%) translateZ(0)}.frown .brow{width:1.5em;bottom:1.375em;border-top:0;border-bottom:.25em solid currentColor;border-radius:0 0 50% 50%}.frown .right .brow{margin-left:-0.625em;transform:rotate(-35deg) translateX(-50%) translateZ(0)}.frown .left .brow{margin-left:.625em;transform:rotate(35deg) translateX(-50%) translateZ(0)}.surprised .brow{bottom:1em;width:1.5em;border-right:0;border-left:none}.surprised .right .brow{margin-left:-0.5em;transform:rotate(-15deg) translateX(-50%) translateZ(0)}.surprised .left .brow{margin-left:.5em;transform:rotate(15deg) translateX(-50%) translateZ(0)}.mouth{position:absolute;top:3.125em;left:50%;width:2.5em;height:1.5em;transform:translateX(-50%);color:#000;border:.25em solid transparent;border-bottom-color:currentColor;border-radius:50%}.mouth::before,.mouth::after{content:'';position:absolute;left:50%;transform:translateX(-50%)}.classic .mouth{top:2.9375em}.large-smile .mouth{top:.125em;width:3.125em;height:5em;border:0;border-bottom:1.5em solid;border-radius:0 0 70% 70%/0 0 50% 50%}.large-smile .mouth::before{top:1.6875em;width:4.25em;height:2em;color:#000;border:.1875em solid transparent;border-bottom-color:currentColor;border-radius:0 0 50% 50%;box-shadow:0 .9375em 0 -0.75em #fff}.large-smile .mouth::after{top:4.4375em;width:1.25em;height:.375em;color:#c00;background-color:currentColor;border-radius:70% 70% 70% 70%/50% 50% 100% 100%}.worried .mouth{top:4.5em;width:2em;height:1.25em;transform:translateX(-50%) rotate(-10deg) translateZ(0);border-top-color:currentColor;border-right:0;border-bottom-color:transparent;border-right-width:.5em;border-radius:50% 50% 0 0}.frown .mouth{top:4.25em;width:2.75em;height:2em;margin-left:-0.125em;transform:translateX(-50%) rotate(-15deg) translateZ(0);border-top-color:currentColor;border-right:0;border-bottom-color:transparent;border-right-width:.5em;border-radius:50% 50% 0 0}.frown .mouth::before{top:.375em;width:.75em;height:.625em;margin-left:.125em;color:#000;border:.125em solid transparent;border-top-color:currentColor;border-right:0;border-radius:50%;border-radius:50% 50% 0 0}.surprised .mouth{top:4em;width:3.125em;height:1.625em;background-color:currentColor;border:0;border-radius:70% 70% 60% 60%/100% 100% 50% 50%}.surprised .mouth::before,.surprised .mouth::after{color:#fff;background-color:currentColor}.surprised .mouth::before{top:.1875em;width:2em;height:.375em;border-radius:70% 70% 60% 60%/100% 100% 50% 50%}.surprised .mouth::after{bottom:.1875em;width:2.25em;height:.375em;border-radius:70% 70% 60% 60%/100% 100% 50% 50%}.upper-body{position:absolute;z-index:1;top:9.25em;width:100%;color:hsl(200,0%,90%);perspective:320px}.upper-body::before,.upper-body::after{content:'';position:absolute;left:50%;transform:translateX(-50%)}.upper-body::before{bottom:100%;width:3em;height:3.5em;background-color:currentColor;background-image:linear-gradient(to right,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2),rgba(255,255,255,0) 90%),linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0.05) 80%,rgba(0,0,0,0.1));border-radius:50% 50% 0 0/10% 10% 0 0}.upper-body::after{top:-2.75em;width:2em;height:2em;background-color:rgba(0,0,0,0.9);background-image:linear-gradient(to right,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 80%,rgba(255,255,255,0));border-radius:50%/10%}.torso{position:absolute;z-index:1;top:0;left:50%;width:7.75em;height:9.125em;transform-origin:top center;transform:translateX(-50%) rotateX(45deg);background-color:currentColor;background-image:linear-gradient(rgba(255,255,255,0.1),rgba(0,0,0,0) 80%,rgba(0,0,0,0.05) 98%,rgba(0,0,0,0.25) 100%);border-radius:.5em .5em .125em .125em;box-shadow:inset 0 .25em .25em rgba(255,255,255,0.5),-1.5em .5em 1em -1.25em rgba(0,0,0,0.3),1.5em .5em 1em -1.25em rgba(0,0,0,0.3)}.arm{position:absolute;left:50%;top:4em;width:3em;height:5.5em;transform-origin:center 1.5em;background-color:currentColor;border-radius:1.5em/1em}.arm.right{margin-left:-6.25rem;transform:translateX(-50%) rotate(12deg);box-shadow:inset .5em .25em .375em -0.25em rgba(255,255,255,0.4),inset 0 0 .75em .75em currentColor,inset 0 0 0 2em rgba(255,255,255,0.15)}.arm.left{margin-left:6.25rem;transform:translateX(-50%) rotate(-12deg);box-shadow:inset -0.5em .25em .375em -0.25em rgba(255,255,255,0.4),inset 0 0 .75em .75em currentColor,inset 0 0 0 2em rgba(255,255,255,0.15)}.arm::before{content:'';position:absolute;bottom:3.5em;left:0;width:100%;height:5.5em;backface-visibility:hidden;transform-origin:center 4.5em;background-color:currentColor;border-radius:1.5em/1.5em 1.5em 1em 1em}.arm.right::before{transform:rotate(14deg);box-shadow:inset .75em .125em .375em -0.5em rgba(255,255,255,0.4),inset .25em 1.1em .75em .75em currentColor,inset 0 0 0 2em rgba(255,255,255,0.15)}.arm.left::before{transform:rotate(-14deg);box-shadow:inset -0.75em .125em .375em -0.5em rgba(255,255,255,0.4),inset -0.25em 1.1em .75em .75em currentColor,inset 0 0 0 2em rgba(255,255,255,0.15)}.arm::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1.5em;transform-origin:center 4.5em;background-color:currentColor;border-radius:50%;box-shadow:inset 0 0 0 1em rgba(255,255,255,0.2)}.hand{position:absolute;z-index:1;top:80%;left:50%;width:1.75em;height:1.75em;transform:translateX(-50%);color:hsla(50,90%,50%,1);background-color:currentColor;background-image:linear-gradient(to right,rgba(255,255,255,0.2),rgba(0,0,0,0.075),rgba(255,255,255,0.2));border-radius:1em/0.5em;box-shadow:0 -0.125em .125em rgba(0,0,0,0.1)}.hand::before{content:'';position:absolute;z-index:1;top:1em;left:50%;width:3.5em;height:3.5em;transform:translateX(-50%);color:hsla(50,90%,60%,1);border:.75em solid;border-bottom-color:transparent;box-shadow:inset 0 .25em rgba(0,0,0,0.15),inset 0 .25em;border-radius:50%}.lower-body{position:absolute;top:18.5em;left:50%;width:10em;height:11.75em;transform:translateX(-50%);color:hsl(200,0%,90%);transition:transform 400ms}.explode .lower-body{transform:translate(-50%,8em)}.lower-body>div{position:absolute;background-color:currentColor}.waist{z-index:1;top:0;width:100%;height:1.5em;background-image:linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0) 80%,rgba(255,255,255,0.1) 90%,rgba(255,255,255,0.15));border-radius:.125em;box-shadow:0 .75em .75em -0.25em rgba(0,0,0,0.25)}.waist::before,.waist::after{content:'';position:absolute;bottom:100%;left:50%;width:3em;height:3em;transform:translateX(-50%);background-color:currentColor;background-image:linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0) 10%),linear-gradient(to right,rgba(255,255,255,0) 20%,rgba(255,255,255,0.25) 25%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,0.25) 75%,rgba(255,255,255,0) 80%,rgba(255,255,255,0.2)),linear-gradient(rgba(255,255,255,0.1),rgba(0,0,0,0.15))}.waist::before{margin-left:-2.75em;border-radius:50% 30% 0 0/100% 30% 0 100%}.waist::after{margin-left:2.75em;border-radius:30% 50% 0 0/30% 100% 100% 0}.crotch{z-index:1;top:1.5em;left:50%;width:10%;height:4.5em;transform:translateX(-50%);background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.05) 10%,rgba(0,0,0,0.2) 10%,rgba(255,255,255,0.1),rgba(0,0,0,0.1));border-radius:0 0 .25em .25em;box-shadow:-0.5em 0 .25em -0.25em rgba(0,0,0,0.15),0.5em 0 .25em -0.25em rgba(0,0,0,0.15),-0.25em 0 .125em -0.125em rgba(0,0,0,0.2),0.25em 0 .125em -0.125em rgba(0,0,0,0.2)}.leg{bottom:0;left:50%;width:4.75em;height:10.75em;transform:translateX(-50%);background-image:linear-gradient(rgba(0,0,0,0.1) 10%,rgba(255,255,255,0.1) 25%,rgba(0,0,0,0.1) 45%,rgba(0,0,0,0),50%,rgba(0,0,0,0.05),65%,rgba(0,0,0,0) 74%,rgba(0,0,0,0.1),78%,rgba(255,255,255,0.2) 78%,rgba(255,255,255,0) 82%,rgba(0,0,0,0.1));border-radius:.25em .25em .0625em .0625em}.leg.right{margin-left:-2.75em}.leg.left{margin-left:2.75em}.controls{position:relative;z-index:1;width:200px;padding:1.5em;color:#333;text-transform:uppercase;background-color:rgba(220,220,220,0.5)}.controls .title{margin-bottom:.5rem;font-weight:900;font-size:1.25em;letter-spacing:.03125em}.button{width:100%;padding:.5em 1em;margin:.25rem 0;color:#666;font-family:inherit;text-transform:uppercase;letter-spacing:.0625em;background-color:#fff;border:1px solid #ddd;border-radius:.5em;cursor:pointer;outline:0}.button:hover{color:#000;border-color:#ccc}.button:active{background-color:#ddd}.controls fieldset{border:0;margin:1rem 0}.controls legend{margin-bottom:1rem;font-weight:bold;font-size:small;letter-spacing:.03125em}.controls label{display:block;font-size:x-small;letter-spacing:.0625em}.controls input[type="range"]{-webkit-appearance:none;appearance:none;position:relative;width:100%;height:2em;padding:.375em;margin:.25rem 0 1rem;color:inherit;background-color:currentColor;border-radius:1em;outline:0}.controls input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;position:relative;z-index:10;width:1.5em;height:1.5em;background-color:hsla(50,90%,50%,1);border-radius:50%;cursor:pointer}.controls input[type="range"]::-moz-range-thumb{position:relative;z-index:10;width:1.5em;height:1.5em;background-color:#333;border-radius:50%;cursor:pointer}.controls input[type="range"]::-moz-range-track{background-color:transparent}</style></head><body><div class="minifigure"><div class="head"><div class="faces-wrap"><div class="faces"><div class="face classic"><div class="eye right"></div><div class="eye left"></div><div class="mouth"></div></div><div class="face smile"><div class="eye right"><div class="brow"></div></div><div class="eye left"><div class="brow"></div></div><div class="mouth"></div></div><div class="face large-smile"><div class="eye right"><div class="brow"></div></div><div class="eye left"><div class="brow"></div></div><div class="mouth"></div></div><div class="face worried"><div class="eye right"><div class="brow"></div></div><div class="eye left"><div class="brow"></div></div><div class="mouth"></div></div><div class="face frown"><div class="eye right"><div class="brow"></div></div><div class="eye left"><div class="brow"></div></div><div class="mouth"></div></div><div class="face surprised"><div class="eye right"><div class="brow"></div></div><div class="eye left"><div class="brow"></div></div><div class="mouth"></div></div></div></div></div><div class="upper-body"><div class="torso"></div><div class="arm right"><div class="hand right"></div></div><div class="arm left"><div class="hand left"></div></div></div><div class="lower-body"><div class="waist"></div><div class="crotch"></div><div class="leg right"></div><div class="leg left"></div></div></div><div class="controls"><h2 class="title">Controls</h2><button class="button explode">Explode</button><button class="button randomize">Randomize</button><fieldset class="head-expression"><legend>Head</legend><div class="form-element"><label for="expression">Expression</label><input id="expression" class="expression-range expression" name="expression" type="range" min="0" max="500" step="100" value="0"></div></fieldset><fieldset class="upper-color"><legend>Upper Body</legend><div class="form-element"><label for="upper-hue">Hue</label><input id="upper-hue" class="color-range upper-hue" name="upper-hue" type="range" min="0" max="360" value="200"></div><div class="form-element"><label for="upper-saturation">Saturation</label><input id="upper-saturation" class="color-range upper-saturation" name="upper-saturation" type="range" min="0" max="100" value="0"></div><div class="form-element"><label for="upper-lightness">Lightness</label><input id="upper-lightness" class="color-range upper-lightness" name="upper-lightness" type="range" min="0" max="90" value="90"></div></fieldset><fieldset class="lower-color"><legend>Lower Body</legend><div class="form-element"><label for="lower-hue">Hue</label><input id="lower-hue" class="color-range lower-hue" name="lower-hue" type="range" min="0" max="360" value="200"></div><div class="form-element"><label for="lower-saturation">Saturation</label><input id="lower-saturation" class="color-range lower-saturation" name="lower-saturation" type="range" min="0" max="100" value="0"></div><div class="form-element"><label for="lower-lightness">Lightness</label><input id="lower-lightness" class="color-range lower-lightness" name="lower-lightness" type="range" min="0" max="90" value="90"></div></fieldset></div><script> var minifigure=document.querySelector('.minifigure');var faces=document.querySelector('.faces');var upperBody=document.querySelector('.upper-body');var lowerBody=document.querySelector('.lower-body');var explode=document.querySelector('.explode');var randomize=document.querySelector('.randomize');var expressionRangeInput=document.querySelector('.expression-range');var colorRangeInput=document.querySelectorAll('.color-range');var upperHue=document.getElementById('upper-hue');var upperSaturation=document.getElementById('upper-saturation');var upperLightness=document.getElementById('upper-lightness');var lowerHue=document.getElementById('lower-hue');var lowerSaturation=document.getElementById('lower-saturation');var lowerLightness=document.getElementById('lower-lightness');explode.addEventListener('click',explodeMinifigure);randomize.addEventListener('click',randomizeInputs);expressionRangeInput.addEventListener('input',setExpression);for(var i=0;i<colorRangeInput.length;i++){colorRangeInput[i].addEventListener('input',setColors)}function getRandomNum(min,max){return Math.random()*(max-min)+min}function explodeMinifigure(){minifigure.classList.toggle('explode');if(minifigure.classList.contains('explode')){explode.innerHTML='Rebuild'}else{explode.innerHTML='Explode'}};function randomizeInputs(){var randomExpression=getRandomNum(0,5);var randomUpperHue=getRandomNum(0,360);var randomUpperSaturation=getRandomNum(0,100);var randomUpperLightness=getRandomNum(0,90);var randomLowerHue=getRandomNum(0,360);var randomLowerSaturation=getRandomNum(0,100);var randomLowerLightness=getRandomNum(0,90);expressionRangeInput.value=randomExpression*100;upperHue.value=randomUpperHue;upperSaturation.value=randomUpperSaturation;upperLightness.value=randomUpperLightness;lowerHue.value=randomLowerHue;lowerSaturation.value=randomLowerSaturation;lowerLightness.value=randomLowerLightness;setExpression();setColors()};function setExpression(){var expressionVal=parseInt(expressionRangeInput.value);faces.style.transform='translateX(-'+expressionVal+'%)'};function setColors(){var upperHueVal=parseInt(upperHue.value);var upperSaturationVal=parseInt(upperSaturation.value);var upperLightnessVal=parseInt(upperLightness.value);var lowerHueVal=parseInt(lowerHue.value);var lowerSaturationVal=parseInt(lowerSaturation.value);var lowerLightnessVal=parseInt(lowerLightness.value);upperBody.style.color='hsl('+upperHueVal+','+upperSaturationVal+'%,'+upperLightnessVal+'%)';lowerBody.style.color='hsl('+lowerHueVal+','+lowerSaturationVal+'%,'+lowerLightnessVal+'%)'};</script></body></html>无压缩版源码下载与使用
关注「前端达人」公众号，回复 "h26" 获取源码
下载完成 ，解压代码，打开网页后，你会看到一个可爱的乐高小人和控制面板。你可以通过面板上的滑动条和按钮，来调整小人的表情和颜色。随时点击“Explode”按钮，享受小人爆炸的乐趣，或者点击“Randomize”按钮，获得一个随机的小人搭配。
扫一扫
2799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
