CSS
* {
box-sizing: border-box;
position: relative;
}
*::after, *::before {
box-sizing: border-box;
content: "";
position: absolute;
}
body {
height: 100vh;
width: 100vw;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #fefefe;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
overflow: hidden;
}
.ironman {
height: 80vmin;
width: 60vmin;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-animation: 8.6s ease-in-out infinite levitate;
animation: 8.6s ease-in-out infinite levitate;
border-radius: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.ears {
height: 10.5%;
width: 46%;
background-color: #dc1f29;
border-radius: 1vmin;
-webkit-clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0);
clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0);
position: relative;
top: 22%;
}
.ears::before {
/* ears border */
height: 100%;
width: 100%;
background-color: #7d000f;
border-radius: inherit;
-webkit-clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0, 95% 4%, 98% 7%, 98% 93%, 95% 96%, 5% 96%, 2% 93%, 2% 7%, 5% 4%, 95% 4%);
clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0, 95% 4%, 98% 7%, 98% 93%, 95% 96%, 5% 96%, 2% 93%, 2% 7%, 5% 4%, 95% 4%);
}
.helmet {
height: 35%;
width: 42%;
background-color: #f7ba37;
border: 0.6vmin solid #7d000f;
border-radius: 11vmin;
box-shadow: inset 0 0.6vmin 0 0.6vmin #dc1f29, inset 1vmin 2vmin 0 0.6vmin #dc1f29, inset -1vmin 2vmin 0 0.6vmin #dc1f29;
overflow: hidden;
z-index: 0;
}
.helmet-outline {
height: 100%;
width: 100%;
background-color: #dc1f29;
-webkit-clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 100% 100%, 100% 0, 0% 0%, 0 100%);
clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 100% 100%, 100% 0, 0% 0%, 0 100%);
position: absolute;
top: 0;
z-index: 1;
}
.helmet-outline::after {
/** border **/
height: 100%;
width: 100%;
background-color: #7d000f;
-webkit-clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 62% 100%, 67% 84%, 81% 77%, 92% 52%, 82% 25%, 63% 14%, 59% 32%, 41% 32%, 37% 14%, 18% 25%, 8% 51%, 19% 77%, 32% 84%, 38% 100%);
clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 62% 100%, 67% 84%, 81% 77%, 92% 52%, 82% 25%, 63% 14%, 59% 32%, 41% 32%, 37% 14%, 18% 25%, 8% 51%, 19% 77%, 32% 84%, 38% 100%);
}
.helmet-outline::before {
/* curve inside outline */
height: 90%;
width: 75%;
border-top: 0.4vmin solid #7d000f;
border-radius: 100%;
left: 12.5%;
top: 20%;
}
.helmet .eyebrowns-line {
height: 70%;
width: 200%;
background-color: #f7ba37;
border-bottom: 0.6vmin solid #7d000f;
border-radius: 100%;
top: -20%;
left: -50%;
position: absolute;
z-index: 1;
}
.helmet .eyes::before, .helmet .eyes::after {
height: 100%;
width: 33%;
background-color: #fefefe;
background-image: -webkit-radial-gradient(ellipse farthest-corner, rgba(111, 199, 233, 0), rgba(111, 199, 233, 0.2) 50%, #6fc7e9);
background-image: radial-gradient(ellipse farthest-corner, rgba(111, 199, 233, 0), rgba(111, 199, 233, 0.2) 50%, #6fc7e9);
border-radius: 3vmin;
}
.helmet .eyes {
height: 20%;
width: 100%;
top: 40%;
}
.helmet .eyes::before {
/* left eye */
-webkit-clip-path: polygon(0 0, 10% 100%, 100% 80%, 100% 0);
clip-path: polygon(0 0, 10% 100%, 100% 80%, 100% 0);
left: 11%;
}
.helmet .eyes::after {
/* right eye */
-webkit-clip-path: polygon(0 0, 0 80%, 90% 100%, 100% 0);
clip-path: polygon(0 0, 0 80%, 90% 100%, 100% 0);
right: 11%;
}
.helmet .mouth {
height: 100%;
width: 100%;
background-color: #7d000f;
-webkit-clip-path: polygon(30% 84%, 38% 76%, 61% 76%, 71% 87%, 71% 88%, 60% 77%, 39% 77%, 30% 86%);
clip-path: polygon(30% 84%, 38% 76%, 61% 76%, 71% 87%, 71% 88%, 60% 77%, 39% 77%, 30% 86%);
position: absolute;
top: 0;
}
.upper-body .left-arm .arm, .upper-body .right-arm .arm, .legs .left, .legs .right {
/* arms & legs */
background-color: #dc1f29;
border: 0.6vmin solid #7d000f;
-webkit-transform-origin: top center;
transform-origin: top center;
z-index: -2;
}
.upper-body .left-arm .arm::before, .upper-body .right-arm .arm::before, .legs .left::before, .legs .right::before {
/* gold stripe */
background-color: #f7ba37;
border: inherit;
}
.upper-body .trunk .arc-reactor, .left-hand .palm .cannon {
background-color: #ca1c26;
border: 0.4vmin solid #7d000f;
border-radius: 100%;
}
.upper-body .trunk .arc-reactor::before, .left-hand .palm .cannon::before {
background-image: -webkit-radial-gradient(circle, #fefefe, #6fc7e9);
background-image: radial-gradient(circle, #fefefe, #6fc7e9);
border: inherit;
border-radius: inherit;
}
.upper-body .right-arm .arm .propulsion, .legs .left .propulsion, .legs .right .propulsion {
background-image: -webkit-linear-gradient(top, #6fc7E9, rgba(111, 199, 233, 0.1) 50%, transparent);
background-image: linear-gradient(to bottom, #6fc7E9, rgba(111, 199, 233, 0.1) 50%, transparent);
left: 10%;
top: 100%;
}
.upper-body {
height: 20%;
width: 60%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
top: -3.5%;
z-index: -1;
}
.upper-body .left-arm .shoulder, .upper-body .right-arm .shoulder {
height: 40%;
width: 100%;
background-color: #dc1f29;
border: 0.6vmin solid #7d000f;
border-radius: 100% 100% 2vmin 2vmin;
-webkit-transform-origin: top center;
transform-origin: top center;
z-index: -1;
}
.upper-body .left-arm {
height: 100%;
width: 24%;
-ms-flex-item-align: start;
align-self: flex-start;
}
.upper-body .left-arm .shoulder {
-webkit-transform: translateX(50%) rotateZ(35deg) rotateX(1deg);
transform: translateX(50%) rotateZ(35deg) rotateX(1deg);
}
.upper-body .left-arm .arm {
height: 40%;
width: 75%;
-webkit-transform: translate(41%, -40%) rotateZ(15deg) rotateX(1deg);
transform: translate(41%, -40%) rotateZ(15deg) rotateX(1deg);
}
.upper-body .left-arm .arm::before {
/* gold arm stripe */
height: 100%;
width: 40%;
border-width: 0 0 0 .6vmin;
right: 0;
}
.upper-body .trunk {
height: 100%;
width: 52%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #dc1f29;
border-radius: 1vmin;
-webkit-clip-path: polygon(0 0, 0 100%, 15% 100%, 20% 85%, 80% 85%, 85% 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 15% 100%, 20% 85%, 80% 85%, 85% 100%, 100% 100%, 100% 0);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.upper-body .trunk::before {
/* border */
height: 100%;
width: 100%;
background-color: #7d000f;
border-radius: inherit;
-webkit-clip-path: polygon(0 0, 50% 0, 50% 3.75%, 3.2% 3.75%, 3.2% 96.25%, 13.4% 96.25%, 18.4% 81.25%, 81.6% 81.25%, 86.6% 96.25%, 96.8% 96.25%, 96.8% 3.75%, 50% 3.75%, 50% 0, 100% 0%, 100% 100%, 85% 100%, 80% 85%, 20% 85%, 15% 100%, 0 100%);
clip-path: polygon(0 0, 50% 0, 50% 3.75%, 3.2% 3.75%, 3.2% 96.25%, 13.4% 96.25%, 18.4% 81.25%, 81.6% 81.25%, 86.6% 96.25%, 96.8% 96.25%, 96.8% 3.75%, 50% 3.75%, 50% 0, 100% 0%, 100% 100%, 85% 100%, 80% 85%, 20% 85%, 15% 100%, 0 100%);
/* manual align needed by FF stable */
left: 0;
top: 0;
}
.upper-body .trunk .arc-reactor {
height: 8vmin;
width: 8vmin;
}
.upper-body .trunk .arc-reactor::before {
/* arc reactor inside */
height: 6.4vmin;
width: 6.4vmin;
-webkit-animation: 1.6s ease-in-out infinite alternate forwards reactor-pulse;
animation: 1.6s ease-in-out infinite alternate forwards reactor-pulse;
left: calc(50% - 3.2vmin);
top: calc(50% - 3.2vmin);
}
.upper-body .right-arm {
height: 100%;
width: 24%;
-ms-flex-item-align: start;
align-self: flex-start;
}
.upper-body .right-arm .shoulder {
-webkit-transform: translateX(-50%) rotateZ(-35deg);
transform: translateX(-50%) rotateZ(-35deg);
}
.upper-body .right-arm .arm {
height: 80%;
width: 75%;
-webkit-transform: translate(-30%, -35%) rotateZ(-30deg) rotateX(1deg);
transform: translate(-30%, -35%) rotateZ(-30deg) rotateX(1deg);
}
.upper-body .right-arm .arm::before {
/* gold arm stripe */
height: 90%;
width: 50%;
border-left-width: 0;
border-radius: 0 0 10vmin 0;
left: 0;
}
.upper-body .right-arm .arm .propulsion {
height: 15vmin;
width: 80%;
}
.upper-body .right-arm .hand {
height: 3vmin;
width: 100%;
background-color: #dc1f29;
border: 0.6vmin solid #7d000f;
border-radius: 2vmin 3vmin 3vmin 3vmin;
-webkit-transform: translate(38%, -240%) rotateZ(-30deg) rotateX(1deg);
transform: translate(38%, -240%) rotateZ(-30deg) rotateX(1deg);
-webkit-transform-origin: top center;
transform-origin: top center;
}
.left-hand {
height: 8%;
width: 13.2%;
left: 20%;
position: absolute;
top: 46%;
z-index: 2;
}
.left-hand .finger-1, .left-hand .finger-2, .left-hand .finger-3, .left-hand .finger-4 {
height: 90%;
width: 2.7vmin;
background-color: #dc1f29;
border: 0.4vmin solid #7d000f;
border-radius: 2.9vmin;
overflow: hidden;
position: absolute;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.left-hand .finger-1::before, .left-hand .finger-2::before, .left-hand .finger-3::before, .left-hand .finger-4::before {
/* phalange line */
height: 50%;
width: 180%;
border-top: 0.5vmin solid #7d000f;
border-radius: 100%;
bottom: 25%;
left: -45%;
}
.left-hand .finger-1 {
-webkit-transform: translate(1vmin, -40%) rotateZ(-65deg);
transform: translate(1vmin, -40%) rotateZ(-65deg);
}
.left-hand .finger-2 {
-webkit-transform: translate(1.4vmin, -70%) rotateZ(-30deg);
transform: translate(1.4vmin, -70%) rotateZ(-30deg);
}
.left-hand .finger-3 {
-webkit-transform: translate(3.6vmin, -70%) rotateZ(0);
transform: translate(3.6vmin, -70%) rotateZ(0);
}
.left-hand .finger-4 {
-webkit-transform: translate(3.5vmin, -45%) rotateZ(65deg);
transform: translate(3.5vmin, -45%) rotateZ(65deg);
width: 2.9vmin;
}
.left-hand .palm {
height: 100%;
width: 100%;
background-color: #dc1f29;
border: 0.6vmin solid #7d000f;
border-radius: 100%;
}
.left-hand .palm .cannon {
height: 4vmin;
width: 4vmin;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: calc(50% - 2vmin);
-webkit-perspective: 800px;
perspective: 800px;
top: calc(50% - 2vmin);
}
.left-hand .palm .cannon::before {
/* arc reactor inside */
height: 3vmin;
width: 3vmin;
left: calc(50% - 1.5vmin);
top: calc(50% - 1.5vmin);
}
.left-hand .palm .cannon::after {
/* plasma blast */
height: 3vmin;
width: 3vmin;
-webkit-animation: 8.6s ease-in-out infinite plasma-shot;
animation: 8.6s ease-in-out infinite plasma-shot;
background-color: #fefefe;
border-radius: 100%;
box-shadow: 0 0 4vmin 2vmin #6fc7E9;
-webkit-filter: blur(1px);
filter: blur(1px);
opacity: 0;
/* manual align needed by FF stable */
top: 0;
left: 0;
}
.pantsu {
height: 13%;
width: 31.2%;
background-color: #dc1f29;
border: 0.6vmin solid #7d000f;
border-radius: 1vmin;
top: -8%;
z-index: -2;
}
.legs .left, .legs .right {
height: 70%;
width: 38%;
position: absolute;
}
.legs .left::before, .legs .right::before {
/* gold stripe */
height: 62%;
width: 55%;
top: 27%;
}
.legs .left::after, .legs .right::after {
height: 15%;
width: 130%;
background-color: #dc1f29;
border: 0.7vmin solid #7d000f;
border-radius: 1vmin 1vmin 2vmin 2vmin;
bottom: -5%;
left: -15%;
}
.legs {
height: 30%;
width: 31.2%;
top: -14%;
}
.legs .left {
border-radius: 3vmin 6vmin 2vmin 2vmin;
-webkit-transform: rotateZ(5deg);
transform: rotateZ(5deg);
}
.legs .left::before {
/* gold left stripe */
border-right-width: 0;
border-radius: 5vmin 0 0 10vmin;
right: 0;
}
.legs .left::after {
/* foot */
}
.legs .left .propulsion {
height: calc(100vh - 80vmin);
width: 80%;
}
.legs .right {
border-radius: 6vmin 3vmin 2vmin 2vmin;
right: 0;
-webkit-transform: rotateZ(-5deg);
transform: rotateZ(-5deg);
}
.legs .right::before {
/* gold right stripe */
border-left-width: 0;
border-radius: 0 5vmin 10vmin 0;
left: 0;
}
.legs .right::after {
/* foot */
}
.legs .right .propulsion {
height: calc(100vh - 80vmin);
width: 80%;
}
/* Animation */
@-webkit-keyframes reactor-pulse {
to {
box-shadow: 0 0 2vmin 1vmin #6fc7E9;
}
}
@keyframes reactor-pulse {
to {
box-shadow: 0 0 2vmin 1vmin #6fc7E9;
}
}
@-webkit-keyframes levitate {
0%,
50%,
100% {
-webkit-transform: translateY(3%);
transform: translateY(3%);
}
25%,
75% {
-webkit-transform: translateY(-3%);
transform: translateY(-3%);
}
}
@keyframes levitate {
0%,
50%,
100% {
-webkit-transform: translateY(3%);
transform: translateY(3%);
}
25%,
75% {
-webkit-transform: translateY(-3%);
transform: translateY(-3%);
}
}
@-webkit-keyframes plasma-shot {
93.02326% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
opacity: 1;
-webkit-transform: translateZ(900px);
transform: translateZ(900px);
}
}
@keyframes plasma-shot {
93.02326% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
opacity: 1;
-webkit-transform: translateZ(900px);
transform: translateZ(900px);
}
}
