html制作机器人,HTML5随机机器人生成器和爆炸拆解动画

CSS

语言：

CSSSCSS

确定

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;

-webkit-perspective: 200;

perspective: 200;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

transition: -webkit-transform 400ms;

transition: transform 400ms;

transition: transform 400ms, -webkit-transform 400ms;

}

.minifigure.explode {

-webkit-transform: scale(0.75) translateZ(0);

transform: scale(0.75) translateZ(0);

}

/* Head */

.head {

position: absolute;

z-index: 1;

top: 2.25em;

left: 50%;

width: 7.25em;

height: 6.25em;

-webkit-transform: translateX(-50%);

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: -webkit-transform 400ms;

transition: transform 400ms;

transition: transform 400ms, -webkit-transform 400ms;

}

.explode .head {

-webkit-transform: translate(-50%, -8em);

transform: translate(-50%, -8em);

}

.head::before,

.head::after {

content: '';

position: absolute;

left: 50%;

height: 2em;

-webkit-transform: translateX(-50%);

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: 0.25em 0.25em 0 0;

}

.head::after {

bottom: -1em;

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 0.125em 0.125em;

}

/* Faces */

.faces-wrap {

height: 100%;

overflow: hidden;

}

.faces {

display: flex;

transition: -webkit-transform 400ms cubic-bezier(0, 0, 0, 1.25);

transition: transform 400ms cubic-bezier(0, 0, 0, 1.25);

transition: transform 400ms cubic-bezier(0, 0, 0, 1.25), -webkit-transform 400ms cubic-bezier(0, 0, 0, 1.25);

}

.explode .faces {

-webkit-transform: translateX(-500%) !important;

transform: translateX(-500%) !important;

}

.face {

position: relative;

flex: 1 0 100%;

}

/* Eyes */

.eye {

position: absolute;

top: 2.25em;

width: 0.75em;

height: 0.9375em;

color: #fff;

background-color: currentColor;

border-radius: 50%;

box-shadow: inset 0 -0.125em 0 0.25em #000;

}

.eye::before {

content: '';

position: absolute;

left: 50%;

color: #000;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.eye.right {

left: 2.25em;

}

.eye.left {

right: 2.25em;

}

.classic .eye {

top: 2.4375em;

height: 0.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 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: 0.1875em solid transparent;

border-bottom-color: currentColor;

border-radius: 50%;

}

.frown .eye.right::before {

margin-left: -0.25em;

-webkit-transform: translateX(-50%) rotate(-20deg);

transform: translateX(-50%) rotate(-20deg);

}

.frown .eye.left::before {

margin-left: 0.25em;

-webkit-transform: translateX(-50%) rotate(20deg);

transform: translateX(-50%) rotate(20deg);

}

/* Brow */

.brow {

position: absolute;

bottom: 0.625em;

left: 50%;

width: 1.75em;

height: 1em;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

color: #000;

border: 0.25em solid transparent;

border-top-color: currentColor;

border-radius: 50%;

}

.right .brow {

border-left: none;

}

.left .brow {

border-right: none;

}

.large-smile .brow {

bottom: 0.375em;

width: 1.25em;

height: 1.375em;

border: none;

border-top: 0.25em solid;

border-radius: 50%;

}

.large-smile .right .brow {

margin-left: -0.125em;

-webkit-transform: skewY(-10deg) translateX(-50%);

transform: skewY(-10deg) translateX(-50%);

}

.large-smile .left .brow {

margin-left: 0.125em;

-webkit-transform: skewY(10deg) translateX(-50%);

transform: skewY(10deg) translateX(-50%);

}

.worried .brow {

width: 1.25em;

height: 0.875em;

bottom: 1.25em;

border-top: none;

border-bottom-color: currentColor;

}

.worried .right .brow {

margin-left: -0.25em;

-webkit-transform: rotate(-20deg) translateX(-50%);

transform: rotate(-20deg) translateX(-50%);

}

.worried .left .brow {

margin-left: 0.25em;

-webkit-transform: rotate(20deg) translateX(-50%);

transform: rotate(20deg) translateX(-50%);

}

.frown .brow {

width: 1.5em;

bottom: 1.375em;

border-top: none;

border-bottom-color: currentColor;

}

.frown .right .brow {

margin-left: -0.625em;

-webkit-transform: rotate(-35deg) translateX(-50%);

transform: rotate(-35deg) translateX(-50%);

}

.frown .left .brow {

margin-left: 0.625em;

-webkit-transform: rotate(35deg) translateX(-50%);

transform: rotate(35deg) translateX(-50%);

}

.surprised .brow {

bottom: 1em;

width: 1.5em;

border-right: none;

border-left: none;

}

.surprised .right .brow {

margin-left: -0.5em;

-webkit-transform: rotate(-15deg) translateX(-50%);

transform: rotate(-15deg) translateX(-50%);

}

.surprised .left .brow {

margin-left: 0.5em;

-webkit-transform: rotate(15deg) translateX(-50%);

transform: rotate(15deg) translateX(-50%);

}

/* Mouth */

.mouth {

position: absolute;

top: 3.125em;

left: 50%;

width: 2.5em;

height: 1.5em;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

color: #000;

border: 0.25em solid transparent;

border-bottom-color: currentColor;

border-radius: 50%;

}

.mouth::before,

.mouth::after {

content: '';

position: absolute;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.classic .mouth {

top: 2.9375em;

}

.large-smile .mouth {

top: 0.125em;

width: 3.125em;

height: 5em;

border: none;

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: 0.1875em solid transparent;

border-bottom-color: currentColor;

border-radius: 0 0 50% 50%;

box-shadow: 0 0.9375em 0 -0.75em #fff;

}

.large-smile .mouth::after {

top: 4.4375em;

width: 1.25em;

height: 0.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;

-webkit-transform: translateX(-50%) rotate(-10deg);

transform: translateX(-50%) rotate(-10deg);

border-top-color: currentColor;

border-right: none;

border-bottom-color: transparent;

border-right-width: 0.5em;

}

.frown .mouth {

top: 4.25em;

width: 2.75em;

height: 2em;

margin-left: -0.125em;

-webkit-transform: translateX(-50%) rotate(-15deg);

transform: translateX(-50%) rotate(-15deg);

border-top-color: currentColor;

border-right: none;

border-bottom-color: transparent;

border-right-width: 0.5em;

}

.frown .mouth::before {

top: 0.375em;

width: 0.75em;

height: 0.625em;

margin-left: 0.125em;

color: #000;

border: 0.125em solid transparent;

border-top-color: currentColor;

border-right: none;

border-radius: 50%;

}

.surprised .mouth {

top: 4em;

width: 3.125em;

height: 1.625em;

background-color: currentColor;

border: none;

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: 0.1875em;

width: 2em;

height: 0.375em;

border-radius: 70% 70% 60% 60%/100% 100% 50% 50%;

}

.surprised .mouth::after {

bottom: 0.1875em;

width: 2.25em;

height: 0.375em;

border-radius: 70% 70% 60% 60%/100% 100% 50% 50%;

}

/* Upper Body */

.upper-body {

position: absolute;

top: 9.25em;

width: 100%;

color: hsl(200, 0%, 90%);

}

.upper-body::before,

.upper-body::after {

content: '';

position: absolute;

left: 50%;

-webkit-transform: translateX(-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;

-webkit-transform-origin: top center;

transform-origin: top center;

-webkit-transform: translateX(-50%) rotateX(25deg);

transform: translateX(-50%) rotateX(25deg);

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: 0.5em 0.5em 0.125em 0.125em;

box-shadow: inset 0 0.25em 0.25em rgba(255, 255, 255, 0.5), -1.5em 0.5em 1em -1.25em rgba(0, 0, 0, 0.3), 1.5em 0.5em 1em -1.25em rgba(0, 0, 0, 0.3);

}

.arm {

position: absolute;

left: 50%;

top: 4em;

width: 3em;

height: 5.5em;

-webkit-transform-origin: center 1.5em;

transform-origin: center 1.5em;

background-color: currentColor;

border-radius: 1.5em/1em;

}

.arm.right {

margin-left: -6.25rem;

-webkit-transform: translateX(-50%) rotate(12deg);

transform: translateX(-50%) rotate(12deg);

box-shadow: inset 0.5em 0.25em 0.375em -0.25em rgba(255, 255, 255, 0.4), inset 0 0 0.75em 0.75em currentColor, inset 0 0 0 2em rgba(255, 255, 255, 0.15);

}

.arm.left {

margin-left: 6.25rem;

-webkit-transform: translateX(-50%) rotate(-12deg);

transform: translateX(-50%) rotate(-12deg);

box-shadow: inset -0.5em 0.25em 0.375em -0.25em rgba(255, 255, 255, 0.4), inset 0 0 0.75em 0.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;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transform-origin: center 4.5em;

transform-origin: center 4.5em;

background-color: currentColor;

border-radius: 1.5em/1.5em 1.5em 1em 1em;

}

.arm.right::before {

-webkit-transform: rotate(14deg);

transform: rotate(14deg);

box-shadow: inset 0.75em 0.125em 0.375em -0.5em rgba(255, 255, 255, 0.4), inset 0.25em 1.1em 0.75em 0.75em currentColor, inset 0 0 0 2em rgba(255, 255, 255, 0.15);

}

.arm.left::before {

-webkit-transform: rotate(-14deg);

transform: rotate(-14deg);

box-shadow: inset -0.75em 0.125em 0.375em -0.5em rgba(255, 255, 255, 0.4), inset -0.25em 1.1em 0.75em 0.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;

-webkit-transform-origin: center 4.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;

-webkit-transform: translateX(-50%);

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 0.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;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

color: hsla(50, 90%, 60%, 1);

border: 0.75em solid;

border-bottom-color: transparent;

box-shadow: inset 0 0.25em rgba(0, 0, 0, 0.15), inset 0 0.25em;

border-radius: 50%;

}

/* Lower Body */

.lower-body {

position: absolute;

top: 18.5em;

left: 50%;

width: 10em;

height: 11.75em;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

color: hsl(200, 0%, 90%);

transition: -webkit-transform 400ms;

transition: transform 400ms;

transition: transform 400ms, -webkit-transform 400ms;

}

.explode .lower-body {

-webkit-transform: translate(-50%, 8em);

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: 0.125em;

box-shadow: 0 0.75em 0.75em -0.25em rgba(0, 0, 0, 0.25);

}

.waist::before,

.waist::after {

content: '';

position: absolute;

bottom: 100%;

left: 50%;

width: 3em;

height: 3em;

-webkit-transform: translateX(-50%);

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;

-webkit-transform: translateX(-50%);

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 0.25em 0.25em;

box-shadow: -0.5em 0 0.25em -0.25em rgba(0, 0, 0, 0.15), 0.5em 0 0.25em -0.25em rgba(0, 0, 0, 0.15), -0.25em 0 0.125em -0.125em rgba(0, 0, 0, 0.2), 0.25em 0 0.125em -0.125em rgba(0, 0, 0, 0.2);

}

.leg {

bottom: 0;

left: 50%;

width: 4.75em;

height: 10.75em;

-webkit-transform: translateX(-50%);

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: 0.25em 0.25em 0.0625em 0.0625em;

}

.leg.right {

margin-left: -2.75em;

}

.leg.left {

margin-left: 2.75em;

}

/* Controls */

.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: 0.5rem;

font-weight: 900;

font-size: 1.25em;

letter-spacing: 0.03125em;

}

.button {

width: 100%;

padding: 0.5em 1em;

margin: 0.25rem 0;

color: #666;

font-family: inherit;

text-transform: uppercase;

letter-spacing: 0.0625em;

background-color: #fff;

border: 1px solid #ddd;

border-radius: 0.5em;

cursor: pointer;

outline: none;

}

.button:hover {

color: #000;

border-color: #ccc;

}

.button:active {

background-color: #ddd;

}

.controls fieldset {

border: none;

margin: 1rem 0;

}

.controls legend {

margin-bottom: 1rem;

font-weight: bold;

font-size: small;

letter-spacing: 0.03125em;

}

.controls label {

display: block;

font-size: x-small;

letter-spacing: 0.0625em;

}

.controls input[type="range"] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

position: relative;

width: 100%;

height: 2em;

padding: 0.375em;

margin: 0.25rem 0 1rem;

color: inherit;

background-color: currentColor;

border-radius: 1em;

outline: none;

}

.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;

}