Iron Man

HTML
<div class="ironman"> <div class="ears"></div> <div class="helmet"> <div class="eyebrowns-line"></div> <div class="eyes"></div> <div class="mouth"></div> <div class="helmet-outline"></div> </div> <div class="upper-body"> <div class="left-arm"> <div class="shoulder"></div> <div class="arm"></div> </div> <div class="trunk"> <div class="arc-reactor"></div> </div> <div class="right-arm"> <div class="shoulder"></div> <div class="arm"> <div class="propulsion"></div> </div> <div class="hand"></div> </div> </div> <div class="left-hand"> <div class="finger-1"></div> <div class="finger-2"></div> <div class="finger-3"></div> <div class="finger-4"></div> <div class="palm"> <div class="cannon"></div> </div> </div> <div class="pantsu"></div> <div class="legs"> <div class="left"> <div class="propulsion"></div> </div> <div class="right"> <div class="propulsion"></div> </div> </div> </div>
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); } }
JAVASCRIPT
Expand for more options Login