/*Downloaded from https://www.codeseek.co/pixelass/css-mannequin-zshDE */
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow: hidden;
font-size: 2em;
background: white;
font-family: sans-serif;
}
input[type="radio"] {
position: absolute;
left: -999em;
top: 0;
}
input[type="radio"] + label {
font-size: 0.5em;
position: relative;
border-radius: 0.2em;
border: 2px solid black;
padding: 0.25em 1em;
margin: 0.25em;
cursor: pointer;
color: black;
background: white;
}
input[type="radio"] + label:hover {
color: white;
background: black;
}
input[type="radio"] + label:before {
content: '';
padding-right: 0.5em;
font-family: FontAwesome;
}
input[type="radio"]:checked + label:before {
content: '\f00c';
}
.man {
font-size: 2.5vh;
position: relative;
height: 20em;
width: 10em;
margin: 0 auto;
/* *
** LEGS */
/* *
** ARMS */
}
.man .body {
height: 10em;
width: 5em;
position: absolute;
top: 2em;
left: 2.5em;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.man .hip {
position: absolute;
bottom: -2em;
left: 0;
width: 3em;
height: 3em;
border-radius: 2em 1em 2em 1em;
background: #90c5da;
}
.man .hip:before {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
border: 1px solid rgba(17, 17, 17, 0.5);
border-top: 0;
background: inherit;
}
.man .stomach {
position: absolute;
z-index: 2;
bottom: -1em;
left: 1em;
width: 3em;
height: 4em;
border-radius: 0 0 2em 2em;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background: #456576;
}
.man .stomach:before {
content: '';
position: absolute;
z-index: 2;
bottom: -1px;
left: 0;
right: 0;
height: 3em;
border: 1px solid rgba(17, 17, 17, 0.5);
border-bottom: 0;
border-top: 0;
border-radius: 0 1em 1em 1em;
background: inherit;
}
.man .chest {
position: absolute;
z-index: 2;
bottom: 2em;
left: -0.5em;
width: 4em;
height: 4em;
border-radius: 2em 3em 1em 2em;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-animation: chest 2000ms linear infinite;
animation: chest 2000ms linear infinite;
background: #456576;
}
.man .chest:before {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
border: 1px solid rgba(17, 17, 17, 0.5);
border-bottom: 0;
background: inherit;
}
.man .head {
position: absolute;
z-index: 4;
top: -6em;
left: 0.2em;
right: -0.2em;
height: 4em;
border-radius: 3em;
border: 1px solid rgba(17, 17, 17, 0.5);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
background: #c4a07c;
-webkit-animation: head 1000ms linear infinite alternate;
animation: head 1000ms linear infinite alternate;
}
.man .head:before {
content: '';
position: absolute;
z-index: 2;
bottom: -0.5em;
left: 0.35em;
right: 1em;
height: 0.75em;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
border: 1px solid rgba(17, 17, 17, 0.5);
border-top: 0;
border-bottom: 0;
border-bottom-left-radius: 1em 0.5em;
border-bottom-right-radius: 1em 0.5em;
background: inherit;
}
.man .leg {
position: absolute;
top: 2em;
left: 0.5em;
width: 2em;
height: 5em;
border: 1px solid rgba(17, 17, 17, 0.5);
border-bottom: 0;
border-top: 0;
border-radius: 1em;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
background: inherit;
}
.man .leg:before {
content: '';
position: absolute;
z-index: 1;
top: -1em;
left: 0;
right: 0;
height: 2em;
border-radius: inherit;
background: inherit;
}
.man .leg:nth-child(1) {
z-index: -1;
background: #79b9d2;
}
.man .leg:nth-child(1) .calve {
background: #ba9167;
}
.man .leg:nth-child(1) .foot {
background: #ba9167;
}
.man .leg:nth-child(2) {
z-index: 1;
background: #94c7db;
}
.man .leg:nth-child(2) .calve {
background: #c6a380;
}
.man .leg:nth-child(2) .foot {
background: #c6a380;
}
.man .calve {
position: absolute;
top: 100%;
left: 0.15em;
width: 1.5em;
height: 5em;
border-radius: 1em;
border: 1px solid rgba(17, 17, 17, 0.5);
border-top: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
background: #c4a07c;
}
.man .calve:before {
content: '';
position: absolute;
z-index: 1;
top: -1em;
left: 0;
right: 0;
height: 2em;
border-radius: inherit;
border: 1px solid rgba(17, 17, 17, 0.5);
background: inherit;
}
.man .calve:after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
height: 2em;
border-radius: inherit;
background: inherit;
}
.man .knee {
position: absolute;
z-index: 2;
bottom: -1px;
left: 0;
right: 0;
height: 3em;
border-radius: 1em;
background: inherit;
border-bottom: 1px solid rgba(17, 17, 17, 0.5);
}
.man .foot {
position: absolute;
top: 100%;
left: -0.3em;
width: 4em;
height: 1em;
border-radius: 1em;
border: 1px solid rgba(17, 17, 17, 0.5);
background: #c4a07c;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.man .foot:before {
content: '';
position: absolute;
z-index: 4;
bottom: -1px;
left: -1px;
right: 0.5em;
height: 1.5em;
border: 1px solid rgba(17, 17, 17, 0.5);
border-right: 0;
border-radius: 3em 5em 0 1em;
background: inherit;
}
.man .foot:after {
content: '';
position: absolute;
z-index: 4;
bottom: 1em;
left: 0.3em;
width: 1.4em;
height: 1em;
border-radius: 1em;
background: inherit;
}
.man .arm {
position: absolute;
top: -0.5em;
left: 0.5em;
width: 2em;
height: 4em;
border: 1px solid rgba(17, 17, 17, 0.5);
border-bottom: 0;
border-top: 0;
border-radius: 1em;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
background: #c6a380;
}
.man .arm:before {
content: '';
position: absolute;
z-index: 4;
top: -0.85em;
left: 0;
right: 0;
height: 2em;
border-top: 1px solid rgba(17, 17, 17, 0.5);
border-left: 1px solid rgba(17, 17, 17, 0.5);
border-radius: inherit;
background: inherit;
}
.man .arm._0 {
z-index: 5;
}
.man .arm._1 {
z-index: -5;
background: #bc936a;
}
.man .elbow {
position: absolute;
z-index: 1;
bottom: 1px;
left: 1px;
right: 1px;
height: 2em;
border-radius: 1em;
background: inherit;
}
.man .underarm {
position: absolute;
top: 100%;
left: 0;
width: 1.5em;
height: 4em;
border-radius: 1em;
border: 1px solid rgba(17, 17, 17, 0.5);
border-top: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
background: inherit;
}
.man .underarm:before {
content: '';
position: absolute;
z-index: 1;
top: -0.8em;
left: -1px;
right: -1px;
height: 1.5em;
border-radius: inherit;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
border-left: 1px solid rgba(17, 17, 17, 0.5);
background: inherit;
}
.man .underarm:after {
content: '';
position: absolute;
z-index: 1;
top: -0.5em;
left: 3px;
right: -1px;
height: 1em;
border-right: 1px solid rgba(17, 17, 17, 0.5);
border-radius: inherit;
background: inherit;
}
#kick:checked ~ .man .leg:nth-child(2) {
-webkit-animation: 2000ms kick-leg linear infinite;
animation: 2000ms kick-leg linear infinite;
-webkit-animation-delay: -1000ms;
animation-delay: -1000ms;
}
#kick:checked ~ .man .leg:nth-child(2) .calve {
-webkit-animation: 2000ms kick-calve linear infinite;
animation: 2000ms kick-calve linear infinite;
-webkit-animation-delay: -1000ms;
animation-delay: -1000ms;
}
@-webkit-keyframes kick-leg {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@keyframes kick-leg {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@-webkit-keyframes kick-calve {
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
50% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@keyframes kick-calve {
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
50% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
#punch:checked ~ .man .arm {
-webkit-animation: 2000ms punch-arm linear infinite;
animation: 2000ms punch-arm linear infinite;
}
#punch:checked ~ .man .arm .underarm {
-webkit-animation: 2000ms punch-underarm linear infinite;
animation: 2000ms punch-underarm linear infinite;
}
#punch:checked ~ .man .arm._0 {
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
#punch:checked ~ .man .arm._0 .underarm {
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
@-webkit-keyframes punch-arm {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-80deg);
transform: rotate(-80deg);
}
}
@keyframes punch-arm {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-80deg);
transform: rotate(-80deg);
}
}
@-webkit-keyframes punch-underarm {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
40%,
70% {
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes punch-underarm {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
40%,
70% {
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#march:checked ~ .man .leg:nth-child(2) {
-webkit-animation-delay: -1000ms;
animation-delay: -1000ms;
}
#march:checked ~ .man .leg:nth-child(2) .calve {
-webkit-animation-delay: -1000ms;
animation-delay: -1000ms;
}
#march:checked ~ .man .leg {
-webkit-animation: 2000ms march-leg linear infinite;
animation: 2000ms march-leg linear infinite;
}
#march:checked ~ .man .leg .calve {
-webkit-animation: 2000ms march-calve linear infinite;
animation: 2000ms march-calve linear infinite;
}
#march:checked ~ .man .arm._1 {
-webkit-animation-delay: -1000ms;
animation-delay: -1000ms;
}
#march:checked ~ .man .arm._1 .underarm {
-webkit-animation-delay: -1000ms;
animation-delay: -1000ms;
}
#march:checked ~ .man .arm {
-webkit-animation: 2000ms march-arm linear infinite;
animation: 2000ms march-arm linear infinite;
}
#march:checked ~ .man .arm .underarm {
-webkit-animation: 2000ms march-underarm linear infinite;
animation: 2000ms march-underarm linear infinite;
}
@-webkit-keyframes march-leg {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
}
}
@keyframes march-leg {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
}
}
@-webkit-keyframes march-calve {
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
}
@keyframes march-calve {
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
}
@-webkit-keyframes march-arm {
0%,
100% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@keyframes march-arm {
0%,
100% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@-webkit-keyframes march-underarm {
10%,
90% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
40%,
70% {
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
}
@keyframes march-underarm {
10%,
90% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
40%,
70% {
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
}
#run:checked ~ .man .leg:nth-child(2) {
-webkit-animation-delay: -500ms;
animation-delay: -500ms;
}
#run:checked ~ .man .leg:nth-child(2) .calve {
-webkit-animation-delay: -500ms;
animation-delay: -500ms;
}
#run:checked ~ .man .leg {
-webkit-animation: 1000ms run-leg linear infinite;
animation: 1000ms run-leg linear infinite;
}
#run:checked ~ .man .leg .calve {
-webkit-animation: 1000ms run-calve linear infinite;
animation: 1000ms run-calve linear infinite;
}
#run:checked ~ .man .arm._1 {
-webkit-animation-delay: -500ms;
animation-delay: -500ms;
}
#run:checked ~ .man .arm._1 .underarm {
-webkit-animation-delay: -500ms;
animation-delay: -500ms;
}
#run:checked ~ .man .arm {
-webkit-animation: 1000ms run-arm linear infinite;
animation: 1000ms run-arm linear infinite;
}
#run:checked ~ .man .arm .underarm {
-webkit-animation: 1000ms run-underarm linear infinite;
animation: 1000ms run-underarm linear infinite;
}
#run:checked ~ .man .body {
-webkit-animation: 1000ms run-body linear infinite;
animation: 1000ms run-body linear infinite;
-webkit-animation-delay: -500ms;
animation-delay: -500ms;
}
@-webkit-keyframes run-leg {
0%,
100% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@keyframes run-leg {
0%,
100% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@-webkit-keyframes run-calve {
0%,
100% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
}
@keyframes run-calve {
0%,
100% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
}
@-webkit-keyframes run-arm {
0%,
100% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@keyframes run-arm {
0%,
100% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@-webkit-keyframes run-underarm {
10%,
90% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
40%,
70% {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
}
@keyframes run-underarm {
10%,
90% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
40%,
70% {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
}
@-webkit-keyframes run-body {
0%,
50%,
100% {
-webkit-transform: translate3d(0, -1em, 0);
transform: translate3d(0, -1em, 0);
}
25%, 75% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes run-body {
0%,
50%,
100% {
-webkit-transform: translate3d(0, -1em, 0);
transform: translate3d(0, -1em, 0);
}
25%, 75% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#jump:checked ~ .man .leg:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
#jump:checked ~ .man .leg:nth-child(2) .calve {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
#jump:checked ~ .man .leg {
-webkit-animation: 2000ms jump-leg linear infinite;
animation: 2000ms jump-leg linear infinite;
}
#jump:checked ~ .man .leg .calve {
-webkit-animation: 2000ms jump-calve linear infinite;
animation: 2000ms jump-calve linear infinite;
}
#jump:checked ~ .man .arm._1 {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
#jump:checked ~ .man .arm._1 .underarm {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
#jump:checked ~ .man .arm {
-webkit-animation: 2000ms jump-arm linear infinite;
animation: 2000ms jump-arm linear infinite;
}
#jump:checked ~ .man .arm .underarm {
-webkit-animation: 2000ms jump-underarm linear infinite;
animation: 2000ms jump-underarm linear infinite;
}
#jump:checked ~ .man .body {
-webkit-animation: 2000ms jump-body linear infinite;
animation: 2000ms jump-body linear infinite;
}
@-webkit-keyframes jump-leg {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
}
}
@keyframes jump-leg {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
}
}
@-webkit-keyframes jump-calve {
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
}
@keyframes jump-calve {
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
}
@-webkit-keyframes jump-arm {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
}
}
@keyframes jump-arm {
20%,
80% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
}
}
@-webkit-keyframes jump-underarm {
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
50% {
-webkit-transform: rotate(-120deg);
transform: rotate(-120deg);
}
}
@keyframes jump-underarm {
20%,
80% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
50% {
-webkit-transform: rotate(-120deg);
transform: rotate(-120deg);
}
}
@-webkit-keyframes jump-body {
20%,
80% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, -3em, 0);
transform: translate3d(0, -3em, 0);
}
}
@keyframes jump-body {
20%,
80% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, -3em, 0);
transform: translate3d(0, -3em, 0);
}
}