Skip to content

Instantly share code, notes, and snippets.

@theWhiteFox

theWhiteFox/css-x-men.markdown

Created March 15, 2017 11:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save theWhiteFox/d315326d56f7bc8ab0da04e2635995c4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save theWhiteFox/d315326d56f7bc8ab0da04e2635995c4 to your computer and use it in GitHub Desktop.
Download ZIP
CSS X-Men
Raw
css-x-men.markdown
Raw
index.html
<section class="stripe" id="professor">
<div class="container">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="eyes"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="neck"></div>
<div class="body">
<div class="jacket"></div>
</div>
<div class="telepathy one"></div>
<div class="telepathy two"></div>
<div class="telepathy three"></div>
</div><!--end .container-->
</section><!--end .stripe#professor-->
<section class="stripe" id="cyclops">
<div class="container">
<div class="face">
<div class="skin"></div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="visor"></div>
</div>
<div class="hair"></div>
<div class="pouf"></div>
<div class="pomp"></div>
<div class="neck"></div>
<div class="body">
<div class="strap"></div>
<div class="cross-strap"></div>
<div class="badge"></div>
</div>
</div><!--end .container-->
</section><!--end .stripe#cyclops-->
<section class="stripe" id="jeangrey">
<div class="container">
<div class="fire">
<div class="flame"></div>
<div class="flame"></div>
<div class="flame"></div>
<div class="flame"></div>
<div class="flame"></div>
<div class="flame"></div>
<div class="flame"></div>
<div class="flame"></div>
<div class="flame"></div>
<div class="flame"></div>
</div>
<div class="hair"></div>
<div class="face">
<div class="eyes"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="hair-front"></div>
<div class="neck"></div>
<div class="body">
<div class="emblem"></div>
</div>
</div><!--end .container-->
</section><!--end .stripe#jeangrey-->
<section class="stripe" id="wolverine">
<div class="container">
<div class="face">
<div class="mask"></div>
<div class="mouth"></div>
</div>
<div class="fin one"></div>
<div class="fin two"></div>
<div class="fin-bridge"></div>
<div class="eye one"></div>
<div class="eye two"></div>
<div class="nose"></div>
<div class="neck"></div>
<div class="body">
<div class="stripes left"></div>
<div class="stripes right"></div>
</div>
<div class="shoulder left"></div>
<div class="shoulder right"></div>
<div class="arm left">
<div class="claw"></div>
<div class="claw"></div>
<div class="claw"></div>
</div>
<div class="arm right">
<div class="claw"></div>
<div class="claw"></div>
<div class="claw"></div>
</div>
</div><!--end .container-->
</section><!--end .stripe#wolverine-->
<section class="stripe" id="storm">
<div class="container">
<div class="rain left">
<div class="drop one"></div>
<div class="drop two"></div>
<div class="drop three"></div>
<div class="drop four"></div>
<div class="drop five"></div>
</div>
<div class="rain right">
<div class="drop one"></div>
<div class="drop two"></div>
<div class="drop three"></div>
<div class="drop four"></div>
<div class="drop five"></div>
</div>
<div class="cloud one"></div>
<div class="cloud two"></div>
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="eyes"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="hair"></div>
<div class="neck"></div>
<div class="body"></div>
<div class="cape"></div>
<div class="badge"></div>
</div><!--end .container-->
</section><!--end .stripe#storm-->
<section class="stripe" id="nightcrawler">
<div class="container">
<div class="kurt">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="eyes"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="hair"></div>
<div class="pouf"></div>
<div class="pomp"></div>
<div class="neck"></div>
<div class="neck"></div>
<div class="body"></div>
<div class="shoulders"></div>
</div>
<div class="bamf">
<div class="bamf-cloud"></div>
</div>
</div><!--end .container-->
</section><!--end .stripe#nightcrawler-->
<section class="stripe" id="iceman">
<div class="container">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="eyes"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="hair"></div>
<div class="pouf"></div>
<div class="pomp"></div>
<div class="neck"></div>
<div class="body">
<div class="stripes"></div>
</div>
</div><!--end .container-->
</section><!--end .stripe#iceman-->
<section class="stripe" id="magneto">
<div class="container">
<div class="helmet">
<div class="opening"></div>
</div>
<div class="face">
<div class="eye one"></div>
<div class="eye two"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="neck"></div>
<div class="cape"></div>
<div class="body"></div>
</div><!--end .container-->
</section><!--end .stripe#magneto-->
Raw
script.js
//Look Ma, no JS!
Raw
style.scss
// ---------------------
//! Colors
// ---------------------
$color-dark: #424b54;
$color-skin: #F0BEAF;
$color-skin-dark: #8b4513;
$color-blue: #2196F3;
$color-gold: #FDD835;
$color-magneto-prime: #EE3152;
$color-magneto-accent: #795998;
$color-magnetism: #90CAF9;
$color-hair-iceman: #B3695B;
$color-elf: #0D47A1;
$color-bamf: #CE93D8;
$color-hair-storm: #ddd;
$color-hair-cyclops: #9b651d;
$color-hair-jean: #DC5846;
// ---------------------
//! GENERAL
// ---------------------
html {
height: 100%;
background:#fff;
}
body {
position: relative;
min-height: 100%;
}
.stripe {
width:100%;
position: relative;
height:392px;
padding:96px 32px;
}
.container {
width:200px;
height:200px;
border-radius: 50%;
position: relative;
margin:0 auto;
overflow: hidden;
z-index: 10;
}
// ---------
//! Cyclops
// ---------
#cyclops {
background: $color-blue;
.container {
background:#fff;
border:2px solid darken($color-blue, 10%);
}
.body {
position: absolute;
width:100px;
height:150px;
background:$color-blue;
top:130px;
left:50%;
transform: translateX(-50%);
border-radius: 40px;
z-index: 1;
overflow: hidden;
}
.jacket {
position: absolute;
background:#ccc;
width:20px;
left:50%;
height:160px;
top:-4px;
transform: translateX(-50%) rotate(8deg);
z-index: 1;
}
.jacket:before {
content:"";
position: absolute;
background:#ccc;
width:20px;
left:-50%;
height:160px;
top:0;
transform: translateX(50%) rotate(-16deg);
z-index: 1;
}
.face {
position: absolute;
width:80px;
height:80px;
background:$color-blue;
border-radius:100px;
top:50px;
left:50%;
transform: translateX(-50%);
z-index: 3;
}
.skin {
position: absolute;
width:50px;
height:59px;
top:12px;
left:50%;
transform: translateX(-50%);
background: $color-skin;
border-radius: 10px;
}
.visor {
position: absolute;
height:20px;
width:80px;
border-radius: 4px;
background: $color-gold;
left:0;
top:16px;
}
.visor:after {
content:"";
height:10px;
width:72px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background:#c62828;
border-radius: 4px;
animation: lasereyes 4s infinite;
}
.neck {
position: absolute;
z-index: 2;
width:30px;
height:50px;
border-radius: 12px;
left:50%;
transform: translateX(-50%);
top:90px;
background:$color-blue;
}
.nose {
position: absolute;
left:50%;
transform: translateX(-50%);
width:8px;
height:14px;
background:darken($color-skin, 15%);
top:36px;
border-radius: 4px;
}
.mouth {
position: absolute;
background: $color-dark;
width:30px;
height:10px;
border-radius: 0 0 100px 100px;
top:56px;
left:50%;
transform: translateX(-50%);
}
.hair {
position: absolute;
width:70px;
height:55px;
background:$color-hair-cyclops;
border-radius: 50%;
top:36px;
left:62px;
}
.pouf {
position: absolute;
width:30px;
height:20px;
border-radius: 50%;
left:60px;
top:46px;
background:$color-hair-cyclops;
transform: rotate(-53deg);
z-index: 10;
}
.pomp {
position: absolute;
width:51px;
height:23px;
border-radius: 100% 0 100% 100%;
left:80px;
top:44px;
background:$color-hair-cyclops;
z-index: 10;
}
.pomp:after {
content:"";
position: absolute;
width:47px;
height:20px;
border-radius: 100% 0 100% 100%;
left:-4px;
top:-6px;
background:$color-hair-cyclops;
z-index: 12;
transform: rotate(-15deg);
}
.strap {
position: absolute;
top:-10px;
height:200px;
background: $color-gold;
width:20px;
right:14px;
}
.cross-strap {
position: absolute;
top:10px;
height:20px;
background: $color-gold;
width:90px;
left:-6px;
transform: rotate(15deg);
}
.badge {
position: absolute;
width:30px;
height:30px;
top:12px;
right:10px;
background:#2196F3;
border-radius: 100%;
border:4px solid $color-gold;
}
.badge:before,
.badge:after {
content:"";
position: absolute;
width:30px;
height:4px;
top:50%;
left:50%;
background:$color-gold;
}
.badge:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.badge:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
@keyframes lasereyes {
0% {
background: #c62828;
}
25% {
background: #c62828;
}
30% {
background: #f44336;
}
35% {
background: #c62828;
}
40% {
background: #f44336;
}
45% {
background: #c62828;
}
50% {
background: #f44336;
}
55% {
background: #c62828;
}
60% {
background: #f44336;
}
65% {
background: #c62828;
}
70% {
background: #f44336;
}
75% {
background: #c62828;
}
100% {
background: #c62828;
}
}
}
// ---------
//! Professor X
// ---------
#professor {
background:#E8E8E8;
.container {
background:#fff;
border:2px solid darken(#e8e8e8, 10%);
}
.body {
position: absolute;
width:100px;
height:150px;
background:$color-dark;
top:130px;
left:50%;
transform: translateX(-50%);
border-radius: 40px;
z-index: 1;
overflow: hidden;
}
.jacket {
position: absolute;
background:#ccc;
width:20px;
left:50%;
height:160px;
top:-4px;
transform: translateX(-50%) rotate(8deg);
z-index: 1;
}
.jacket:before {
content:"";
position: absolute;
background:#ccc;
width:20px;
left:-50%;
height:160px;
top:0;
transform: translateX(50%) rotate(-16deg);
z-index: 1;
}
.face {
position: absolute;
width:80px;
height:80px;
background:$color-skin;
border-radius:100px;
top:50px;
left:50%;
transform: translateX(-50%);
z-index: 3;
}
.neck {
position: absolute;
z-index: 2;
width:30px;
height:50px;
border-radius: 12px;
left:50%;
transform: translateX(-50%);
top:90px;
background:$color-skin;
}
.eyes {
position: absolute;
top:34px;
width:10px;
height:10px;
background: $color-dark;
border-radius: 50%;
left:25%;
transform: translateX(-50%);
}
.eyes:after {
content:"";
position: absolute;
width:10px;
height:10px;
background: $color-dark;
top:0;
border-radius: 50%;
right:-40px;
}
.nose {
position: absolute;
left:50%;
transform: translateX(-50%);
width:8px;
height:14px;
background:darken($color-skin, 15%);
top:36px;
border-radius: 4px;
}
.mouth {
position: absolute;
background: $color-dark;
width:30px;
height:4px;
border-radius: 0 0 100px 100px;
top:60px;
left:50%;
transform: translateX(-50%);
}
.ear {
position: absolute;
background:$color-skin;
width:26px;
height:26px;
border-radius: 100%;
left:50px;
top:76px;
}
.ear.right {
left:120px;
}
.ear:before {
content:"";
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:16px;
height:16px;
background: darken($color-skin, 10%);
border-radius: 100%;
}
.badge {
position: absolute;
width:20px;
height:20px;
top:20px;
right:10px;
background:#2196F3;
border-radius: 100%;
border:2px solid #FDD835;
}
.badge:before,
.badge:after {
content:"";
position: absolute;
width:20px;
height:2px;
top:50%;
left:50%;
background:#FDD835;
}
.badge:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.badge:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.telepathy {
position: absolute;
width:260px;
height:260px;
border: solid 2px #9acaf9;
left:50%;
top:50%;
transform: translate(-50%,-50%);
opacity: 0;
border-radius: 50%;
}
.telepathy.one {
animation: telepath 4s 1s infinite;
}
.telepathy.two {
animation: telepath 4s 1.5s infinite;
}
.telepathy.three {
animation: telepath 4s 2s infinite;
}
@keyframes telepath {
0% {
transform: translate(-50%, -50%) scale(0.0);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1.0);
opacity: 1;
}
}
}
// ---------
//! Jean Grey
// ---------
#jeangrey {
background: $color-hair-jean;
.container {
background:#fff;
border:2px solid darken($color-hair-jean, 10%);
}
.body {
position: absolute;
width:100px;
height:150px;
background:#61AE71;
top:130px;
left:50%;
transform: translateX(-50%);
border-radius: 40px;
z-index: 1;
overflow: hidden;
}
.body:before {
content: "";
position: absolute;
top:-3px;
left:50%;
transform: translateX(-50%);
background: $color-skin;
width:100%;
height:20px;
border-radius: 100%;
}
.face {
position: absolute;
width:80px;
height:80px;
background:$color-skin;
border-radius:100px;
top:50px;
left:50%;
transform: translateX(-50%);
z-index: 3;
}
.hair {
position: absolute;
width:110px;
height:130px;
top:30px;
left:50%;
transform: translateX(-50%);
background: $color-hair-jean;
border-radius: 50% 50% 0 0;
}
.hair-front {
position: absolute;
left:60px;
top:37px;
width:60px;
height:40px;
border-radius: 50%;
background: $color-hair-jean;
z-index: 20;
}
.neck {
position: absolute;
z-index: 2;
width:30px;
height:50px;
border-radius: 12px;
left:50%;
transform: translateX(-50%);
top:90px;
background:$color-skin;
}
.eyes {
position: absolute;
top:34px;
width:10px;
height:10px;
background: $color-dark;
border-radius: 50%;
left:25%;
transform: translateX(-50%);
animation-name: eyes;
animation-duration: 8s;
animation-timing-function: linear;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.eyes:after {
content:"";
position: absolute;
width:10px;
height:10px;
background: $color-dark;
top:0;
border-radius: 50%;
right:-40px;
animation-name: eyes;
animation-duration: 8s;
animation-timing-function: linear;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.nose {
position: absolute;
left:50%;
transform: translateX(-50%);
width:8px;
height:14px;
background:darken($color-skin, 15%);
top:36px;
border-radius: 4px;
}
.mouth {
position: absolute;
background: $color-dark;
width:30px;
height:6px;
border-radius: 0 0 100px 100px;
top:56px;
left:50%;
transform: translateX(-50%);
}
.emblem {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: $color-gold transparent transparent transparent;
top:25px;
left:50%;
transform: translateX(-50%);
}
.fire {
position: absolute;
width:100%;
height:100px;
bottom:-160px;
left:0;
background:#FB8C00;
z-index: 0;
animation-name: fire;
animation-duration: 8s;
animation-timing-function: linear;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.flame {
position: absolute;
bottom:100%;
width:5%;
height:40px;
border-radius: 10px 10px 0 0;
background: #FB8C00;
}
.flame:after {
content: "";
position: absolute;
left:100%;
background:#fff;
border-radius: 0 0 10px 10px;
top:100%;
width:100%;
height:80%;
}
.flame:nth-child(1) {
left:0;
height:40px;
}
.flame:nth-child(2) {
left:10%;
height:20px;
}
.flame:nth-child(3) {
left:20%;
height:60px;
}
.flame:nth-child(4) {
left:30%;
height:10px;
}
.flame:nth-child(5) {
left:40%;
height:30px;
}
.flame:nth-child(6) {
left:50%;
height:40px;
}
.flame:nth-child(7) {
left:60%;
height:20px;
}
.flame:nth-child(8) {
left:70%;
height:30px;
}
.flame:nth-child(9) {
left:80%;
height:40px;
}
.flame:nth-child(10) {
left:90%;
height:20px;
}
@keyframes fire {
0% {
bottom:-160px;
}
20% {
bottom:-160px;
}
30% {
bottom:-10px;
}
40% {
bottom:0;
}
50% {
bottom:-10px;
}
60% {
bottom:0;
}
70% {
bottom:-10px;
}
80% {
bottom:0;
}
100% {
bottom:-160px;
}
}
@keyframes eyes {
0% {
background: $color-dark;
}
20% {
background: $color-dark;
}
40% {
background:#FB8C00;
}
60% {
background:#FB8C00;
}
70% {
background:#FB8C00;
}
100% {
background: $color-dark;
}
}
}
// ---------
//! Wolverine
// ---------
#wolverine {
background:$color-gold;
.container {
background:#fff;
border:2px solid darken($color-gold, 15%);
}
.body {
position: absolute;
width:100px;
height:150px;
background:$color-gold;
top:140px;
left:50%;
transform: translateX(-50%);
border-radius: 0;
z-index: 1;
overflow: hidden;
}
.face {
position: absolute;
width:80px;
height:80px;
background:$color-skin;
border-radius:100px;
top:60px;
left:50%;
transform: translateX(-50%);
z-index: 3;
overflow: hidden;
}
.fin {
position: absolute;
width:50px;
height:40px;
background: $color-dark;
z-index: 20;
top:71px;
}
.fin.one{
border-radius: 0 0 2px 90%;
left:40px;
transform: rotate(25deg);
}
.fin.two{
border-radius: 0 0 90% 2px;
right:40px;
transform: rotate(-25deg);
}
.fin-bridge {
position: absolute;
left:50%;
transform: translateX(-50%);
background: $color-dark;
height:30px;
width:34px;
top:80px;
z-index: 20;
}
.mask {
position: absolute;
height:50px;
left:-10px;
right:-10px;
background: $color-gold;
}
.neck {
position: absolute;
z-index: 2;
width:30px;
height:50px;
border-radius: 12px;
left:50%;
transform: translateX(-50%);
top:100px;
background:$color-skin;
}
.eye{
position: absolute;
top:92px;
width:10px;
height:8px;
background: #fff;
border-radius: 50%;
z-index: 100;
}
.eye.one {
left:76px;
transform: rotate(45deg);
}
.eye.two {
right:76px;
transform: rotate(-45deg);
}
.mouth {
position: absolute;
background: $color-dark;
width:30px;
height:10px;
border-radius: 0 0 100px 100px;
top:56px;
left:50%;
transform: translateX(-50%) rotate(180deg);
}
.nose {
position: absolute;
left:50%;
transform: translateX(-50%);
width:8px;
height:8px;
background:$color-gold;
top:102px;
border-radius: 4px 4px 0 0;
z-index: 30;
}
.stripes {
position: absolute;
border-style: solid;
width:0;
height:0;
top:40px;
}
.stripes.left {
border-width: 10px 0 10px 40px;
border-color: transparent transparent transparent $color-dark;
left:0;
}
.stripes.right {
border-width: 10px 40px 10px 0;
border-color: transparent $color-dark transparent transparent;
right:0;
}
.shoulder {
position: absolute;
width: 0;
height: 0;
border-style: solid;
z-index: 30;
top:140px;
}
.shoulder.left {
left:30px;
border-width: 0 30px 80px 0;
border-color: transparent $color-blue transparent transparent;
}
.shoulder.right {
right:30px;
border-width: 80px 30px 0 0;
border-color: $color-blue transparent transparent transparent;
}
.arm {
position: absolute;
z-index: 100;
background: $color-skin;
width:28px;
height:46px;
bottom:0;
border-radius: 4px;
}
.arm.left {
left:40px;
transform: rotate(5deg);
}
.arm.right{
right:40px;
transform: rotate(-5deg);
}
.claw {
position: absolute;
bottom:36px;
height:0;
width:4px;
background: #CFD8DC;
animation-name: snikt;
animation-duration: 4s;
animation-timing-function: ease-in;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.claw:nth-child(1){
left:4px;
}
.claw:nth-child(2){
left:50%;
margin-left:-2px;
}
.claw:nth-child(3){
right:4px;
}
.arm.left .claw{
border-radius: 80% 0 0 0;
}
.arm.right .claw {
border-radius: 0 80% 0 0;
}
@keyframes snikt {
0% {
height:0;
}
10% {
height: 40px;
}
60% {
height:40px;
}
70% {
height:40px;
}
80% {
height:0px;
}
100% {
height: 0;
}
}
}
// ---------
//! Storm
// ---------
#storm {
background:$color-hair-storm;
.container {
background:#fff;
border:2px solid darken($color-hair-storm, 20%);
}
.body {
position: absolute;
width:80px;
height:150px;
background:#eee;
top:130px;
left:50%;
transform: translateX(-50%);
border-radius: 40px;
z-index: 1;
overflow: hidden;
}
.body:before {
content: "";
position: absolute;
top:-3px;
left:50%;
transform: translateX(-50%);
background: $color-skin-dark;
width:70%;
height:20px;
border-radius: 100%;
}
.cape {
position: absolute;
background: $color-dark;
width:140px;
height:150px;
top:124px;
left:50%;
transform: translateX(-50%);
border-radius: 50%;
}
.badge {
position: absolute;
width:30px;
height:30px;
top:140px;
left:50%;
transform: translateX(-50%);
background:red;
border-radius: 100%;
border:4px solid darken($color-dark, 10%);
z-index: 10;
}
.badge:before,
.badge:after {
content:"";
position: absolute;
width:30px;
height:4px;
top:50%;
left:50%;
background:darken($color-dark, 10%);
}
.badge:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.badge:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.face {
position: absolute;
width:80px;
height:80px;
background:$color-skin-dark;
border-radius:100px;
top:50px;
left:50%;
transform: translateX(-50%);
z-index: 3;
}
.neck {
position: absolute;
z-index: 2;
width:30px;
height:50px;
border-radius: 12px;
left:50%;
transform: translateX(-50%);
top:90px;
background:$color-skin-dark;
}
.eyes {
position: absolute;
top:34px;
width:10px;
height:10px;
background: #ddd;
border-radius: 50%;
left:25%;
transform: translateX(-50%);
}
.eyes:after {
content:"";
position: absolute;
width:10px;
height:10px;
background: #ddd;
top:0;
border-radius: 50%;
right:-40px;
}
.nose {
position: absolute;
left:50%;
transform: translateX(-50%);
width:8px;
height:14px;
background:darken($color-skin-dark, 10%);
top:36px;
border-radius: 4px;
}
.mouth {
position: absolute;
background: #5e2f0d;
width:30px;
height:8px;
border-radius: 0 0 100px 100px;
top:60px;
left:50%;
transform: translateX(-50%);
}
.ear {
position: absolute;
background:$color-skin-dark;
width:26px;
height:26px;
border-radius: 100%;
left:50px;
top:76px;
}
.ear.right {
left:120px;
}
.ear:before {
content:"";
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:16px;
height:16px;
background: darken($color-skin-dark, 10%);
border-radius: 100%;
}
.hair {
position: absolute;
background: $color-hair-storm;
width:30px;
height:40px;
border-radius: 50% 0 50% 0;
left:86px;
top:34px;
z-index: 20;
transform: rotate(-20deg);
}
.hair:before {
content: "";
position: absolute;
background: $color-hair-storm;
width:30px;
height:40px;
border-radius: 50% 0 50% 0;
left:-3px;
top:-6px;
z-index: 20;
transform: rotate(-20deg);
}
.cloud {
position: absolute;
background: #ccc;
width:80px;
height:40px;
border-radius: 20px;
animation-name: clouds;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.cloud:after {
content: "";
position: absolute;
width:30px;
height:30px;
left:10px;
top:-10px;
border-radius: 50%;
background:#ccc;
}
.cloud:before {
content: "";
position: absolute;
width:40px;
height:40px;
right:8px;
top:-15px;
border-radius: 50%;
background:#ccc;
}
.cloud.one {
top:30px;
left:5px;
}
.cloud.two {
top:40px;
right:0px;
}
.rain {
position: absolute;
width:80px;
animation-name: clouds;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.rain.left {
left:5px;
top:60px;
}
.rain.right {
right:0px;
top:70px;
}
.drop {
position: absolute;
background:#64B5F6;
height:6px;
width:2px;
left:20px;
top:0;
}
.drop:before,
.drop:after {
content: "";
position: absolute;
width:2px;
height:6px;
background:#64B5F6;
}
.drop:before {
left:20px;
top:4px;
}
.drop:after {
left:38px;
top:0px;
}
.drop.one {
animation-name: raindrops;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.drop.two {
animation-name: raindrops;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: .2s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.drop.three {
animation-name: raindrops;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: .4s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.drop.four {
animation-name: raindrops;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: .6s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.drop.five {
animation-name: raindrops;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: .8s;
animation-direction: normal;
animation-iteration-count: infinite;
}
@keyframes clouds {
0% {
opacity:0;
}
20% {
opacity: 0;
transform: scale(0.5);
}
30% {
opacity: 1;
transform: scale(1);
}
70% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes raindrops {
0% {
transform: translateY(0);
}
100% {
transform: translateY(150px);
}
}
}
// ---------
//! Nightcrawler
// ---------
#nightcrawler {
background:$color-elf;
.container {
background:#fff;
border:2px solid darken($color-elf, 10%);
}
.kurt {
animation-name: bamf;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 3s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.body {
position: absolute;
width:100px;
height:150px;
background:$color-dark;
top:130px;
left:50%;
transform: translateX(-50%);
border-radius: 40px;
z-index: 1;
overflow: hidden;
}
.shoulders {
position: absolute;
top:130px;
left:50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 200px 50px 0 50px;
border-color: #b71c1c transparent transparent transparent;
z-index: 1;
border-radius: 15px;
}
.shoulders:after {
content: "";
position: absolute;
bottom:0;
left:50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 200px 20px 0 20px;
border-color: $color-dark transparent transparent transparent;
}
.face {
position: absolute;
width:80px;
height:80px;
background:$color-elf;
border-radius:100px;
top:50px;
left:50%;
transform: translateX(-50%);
z-index: 3;
}
.neck {
position: absolute;
z-index: 2;
width:30px;
height:50px;
border-radius: 12px;
left:50%;
transform: translateX(-50%);
top:90px;
background:$color-elf;
}
.eyes {
position: absolute;
top:34px;
width:10px;
height:10px;
background: $color-gold;
border-radius: 50%;
left:25%;
transform: translateX(-50%);
}
.eyes:after {
content:"";
position: absolute;
width:10px;
height:10px;
background: $color-gold;
top:0;
border-radius: 50%;
right:-40px;
}
.nose {
position: absolute;
left:50%;
transform: translateX(-50%);
width:8px;
height:14px;
background:darken($color-elf, 15%);
top:36px;
border-radius: 4px;
}
.mouth {
position: absolute;
background: #ccc;
width:30px;
height:10px;
border-radius: 0 0 100px 100px;
top:60px;
left:50%;
transform: translateX(-50%);
}
.ear {
position: absolute;
background:$color-elf;
width:26px;
height:26px;
left:50px;
top:76px;
z-index: 1;
}
.ear.left {
border-radius: 0% 100% 20% 100%;
}
.ear.right {
left:120px;
border-radius: 100% 0 100% 20%;
}
.ear:before {
content:"";
position: absolute;
top:3px;
left:50%;
transform: translateX(-50%);
width:16px;
height:16px;
background: darken($color-elf, 10%);
border-radius: 100%;
}
.hair {
position: absolute;
width:70px;
height:40px;
background:darken($color-elf, 20%);
border-radius: 50%;
top:43px;
left:62px;
z-index: 1;
}
.pouf {
position: absolute;
width:30px;
height:20px;
border-radius: 50%;
left:60px;
top:46px;
background:darken($color-elf, 20%);
transform: rotate(-53deg);
z-index: 10;
}
.pomp {
position: absolute;
width:51px;
height:23px;
border-radius: 100% 0 100% 100%;
left:80px;
top:44px;
background:darken($color-elf, 20%);
z-index: 10;
}
.pomp:after {
content:"";
position: absolute;
width:47px;
height:20px;
border-radius: 100% 0 100% 100%;
left:-4px;
top:-6px;
background:darken($color-elf, 20%);
z-index: 12;
transform: rotate(-15deg);
}
.pomp:before {
content:"";
position: absolute;
width:30px;
height:20px;
border-radius: 100% 20% 100% 100%;
left:-4px;
top:-6px;
background:darken($color-elf, 20%);
z-index: 12;
transform: rotate(-50deg);
}
.bamf {
position: absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
width:100px;
height:100px;
background:$color-bamf;
border-radius: 50%;
opacity: 0;
animation-name: brimstone;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 3s;
animation-direction: normal;
animation-iteration-count: infinite;
}
.bamf:before {
content: "";
position: absolute;
top:-10px;
left:-10px;
width:40px;
height:40px;
background:lighten($color-bamf, 5%);
border-radius: 50%;
}
.bamf:after {
content: "";
position: absolute;
bottom:-10px;
right:-10px;
width:50px;
height:50px;
background:lighten($color-bamf, 10%);
border-radius: 50%;
}
.bamf-cloud {
position: absolute;
bottom:-20px;
left:-20px;
width:60px;
height:60px;
background:lighten($color-bamf, 10%);
border-radius: 50%;
}
.bamf-cloud:before {
content:"";
position: absolute;
top:-70px;
left:70px;
width:60px;
height:60px;
background:lighten($color-bamf, 5%);
border-radius: 50%;
}
.bamf-cloud:after {
content:"";
position: absolute;
top:-70px;
left:60px;
width:20px;
height:20px;
background:lighten($color-bamf, 10%);
border-radius: 50%;
}
@keyframes bamf {
0% {
opacity: 1;
}
5% {
opacity:0;
}
20% {
opacity:0;
}
25% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes brimstone {
0% {
transform: scale(0.2);
opacity: 0;
}
5% {
transform: scale(1);
opacity:1;
}
15% {
transform: scale(1);
opacity:1;
}
20% {
transform: scale(0.2);
opacity: 0;
}
100% {
transform: scale(0.2);
opacity: 0;
}
}
}
// ---------
//! Iceman
// ---------
#iceman {
background:darken(#BBDEFB, 10%);
.container {
background:#fff;
border:2px solid darken(#BBDEFB, 20%);
}
.body {
position: absolute;
width:100px;
height:150px;
background:$color-blue;
top:130px;
left:50%;
transform: translateX(-50%);
border-radius: 40px;
z-index: 1;
overflow: hidden;
animation: freezeBody 5s 1s infinite backwards alternate;
}
.stripes {
position: absolute;
background:$color-gold;
width:20px;
left:50%;
height:160px;
top:-40px;
transform: translateX(-50%) rotate(55deg);
z-index: 1;
animation: freezeGold 5s 1s infinite backwards alternate;
}
.stripes:before {
content:"";
position: absolute;
background:$color-gold;
width:20px;
left:-50%;
height:160px;
top:0;
transform: translateX(50%) rotate(-110deg);
z-index: 1;
animation: freezeGold 5s 1s infinite backwards alternate;
}
.face {
position: absolute;
width:80px;
height:80px;
background:$color-skin;
border-radius:100px;
top:50px;
left:50%;
transform: translateX(-50%);
z-index: 3;
animation: freezeSkin 5s 1s infinite backwards alternate;
}
.neck {
position: absolute;
z-index: 2;
width:30px;
height:50px;
border-radius: 12px;
left:50%;
transform: translateX(-50%);
top:90px;
background:$color-skin;
animation: freezeSkin 5s 1s infinite backwards alternate;
}
.eyes {
position: absolute;
top:34px;
width:10px;
height:10px;
background: $color-dark;
border-radius: 50%;
left:25%;
transform: translateX(-50%);
animation: freezeDarker 5s 1s infinite backwards alternate;
}
.eyes:after {
content:"";
position: absolute;
width:10px;
height:10px;
background: $color-dark;
top:0;
border-radius: 50%;
right:-40px;
animation: freezeDarker 5s 1s infinite backwards alternate;
}
.nose {
position: absolute;
left:50%;
transform: translateX(-50%);
width:8px;
height:14px;
background:darken($color-skin, 15%);
top:36px;
border-radius: 4px;
animation: freezeDarkerSkin 5s 1s infinite backwards alternate;
}
.mouth {
position: absolute;
background: $color-dark;
width:30px;
height:14px;
border-radius: 0 0 100px 100px;
top:56px;
left:50%;
transform: translateX(-50%);
animation: freezeDarker 5s 1s infinite backwards alternate;
}
.ear {
position: absolute;
background:$color-skin;
width:26px;
height:26px;
border-radius: 100%;
left:50px;
top:76px;
animation: freezeSkin 5s 1s infinite backwards alternate;
}
.ear.right {
left:120px;
}
.ear:before {
content:"";
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:16px;
height:16px;
background: darken($color-skin, 10%);
border-radius: 100%;
animation: freezeDarkerSkin 5s 1s infinite backwards alternate;
}
.hair {
position: absolute;
width:70px;
height:50px;
background:$color-hair-iceman;
border-radius: 50%;
top:40px;
left:62px;
z-index: 1;
animation: freezeHair 5s 1s infinite backwards alternate;
}
.pouf {
position: absolute;
width:50px;
height:30px;
border-radius: 100px 100% 100px 100%;
left:60px;
top:46px;
background:$color-hair-iceman;
z-index: 10;
animation: freezeHair 5s 1s infinite backwards alternate;
}
@keyframes freezeBody {
0% {
background-color:$color-blue;
}
10% {
background-color: $color-blue;
}
20% {
background-color:#BBDEFB;
}
70% {
background-color:#BBDEFB;
}
80% {
background-color: $color-blue;
}
100% {
background-color: $color-blue;
}
}
@keyframes freezeSkin {
0% {
background-color:$color-skin;
}
10% {
background-color: $color-skin;
}
20% {
background-color:#BBDEFB;
}
70% {
background-color:#BBDEFB;
}
80% {
background-color: $color-skin;
}
100% {
background-color: $color-skin;
}
}
@keyframes freezeHair {
0% {
background-color:$color-hair-iceman;
}
10% {
background-color: $color-hair-iceman;
}
20% {
background-color:darken(#BBDEFB, 5%);
}
70% {
background-color:darken(#BBDEFB, 5%);
}
80% {
background-color: $color-hair-iceman;
}
100% {
background-color: $color-hair-iceman;
}
}
@keyframes freezeGold {
0% {
background-color:$color-gold;
}
10% {
background-color: $color-gold;
}
20% {
background-color:darken(#BBDEFB, 5%);
}
70% {
background-color:darken(#BBDEFB, 5%);
}
80% {
background-color: $color-gold;
}
100% {
background-color: $color-gold;
}
}
@keyframes freezeDarkerSkin {
0% {
background-color:darken($color-skin, 10%);
}
10% {
background-color: darken($color-skin, 10%);
}
20% {
background-color:darken(#BBDEFB, 5%);
}
70% {
background-color:darken(#BBDEFB, 5%);
}
80% {
background-color: darken($color-skin, 10%);
}
100% {
background-color: darken($color-skin, 10%);
}
}
@keyframes freezeDarker {
0% {
background-color:$color-dark;
}
10% {
background-color:$color-dark;
}
20% {
background-color:darken(#BBDEFB, 20%);
}
70% {
background-color:darken(#BBDEFB, 20%);
}
80% {
background-color:$color-dark;
}
100% {
background-color: $color-dark;
}
}
}
// ---------
//! Magneto
// ---------
#magneto {
background:#E8E8E8;
.container {
background:#fff;
border:2px solid darken(#e8e8e8, 10%);
}
.body {
position: absolute;
width:80px;
height:150px;
background:$color-magneto-prime;
top:130px;
left:50%;
transform: translateX(-50%);
border-radius: 40px;
z-index: 1;
overflow: hidden;
}
.body:before {
content: "";
position: absolute;
top:-3px;
left:50%;
transform: translateX(-50%);
background: $color-magneto-accent;
width:80%;
height:30px;
border-radius: 100%;
}
.helmet {
position: absolute;
width:100px;
height:100px;
top:30px;
left:50%;
transform: translateX(-50%);
border-radius: 40px 40px 0 0;
background-color:$color-magneto-prime;
background-clip: padding-box;
z-index: 5;
border-top:10px solid rgba($color-magnetism, 0);
border-left:10px solid rgba($color-magnetism, 0);
border-right:10px solid rgba($color-magnetism, 0);
animation-name: magnet;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.opening {
position: absolute;
width:38px;
height:30px;
bottom:0px;
left:50%;
transform: translateX(-50%);
border-radius: 0;
background:$color-skin;
z-index: 5;
border-left:4px solid $color-magneto-accent;
border-right:4px solid $color-magneto-accent;
}
.opening:before {
content:"";
width:38px;
height:38px;
border-radius: 50% 0 0 50%;
position: absolute;
left:-19px;
top:-30px;
background: $color-skin;
border:4px solid $color-magneto-accent;
}
.opening:after {
content:"";
width:38px;
height:38px;
border-radius: 0 50% 50% 0;
position: absolute;
right:-19px;
top:-30px;
background: $color-skin;
border:4px solid $color-magneto-accent;
}
.face {
position: absolute;
width:30px;
height:56px;
background:$color-skin;
top:74px;
left:50%;
transform: translateX(-50%);
z-index: 7;
}
.face:before {
content: "";
width: 0;
height: 0;
position: absolute;
top:-5px;
left:50%;
margin-left:-10px;
border-style: solid;
border-width: 8px 10px 0 10px;
border-color: $color-magneto-prime transparent transparent transparent;
z-index: 10;
}
.face:after {
content: "";
width: 0;
height: 0;
position: absolute;
top:0;
left:50%;
margin-left:-10px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: $color-magneto-accent transparent transparent transparent;
}
.neck {
position: absolute;
z-index: 2;
width:30px;
height:50px;
border-radius: 12px;
left:50%;
transform: translateX(-50%);
top:90px;
background:$color-magneto-accent;
}
.eye{
position: absolute;
top:10px;
width:10px;
height:8px;
background: $color-dark;
border-radius: 50%;
z-index: 100;
}
.eye.one {
left:-6px;
transform: rotate(25deg);
}
.eye.two {
right:-6px;
transform: rotate(-25deg);
}
.eyes {
position: absolute;
top:10px;
width:10px;
height:10px;
background: $color-dark;
border-radius: 50%;
left:-6px;
}
.eyes:after {
content:"";
position: absolute;
width:10px;
height:10px;
background: $color-dark;
top:0;
border-radius: 50%;
right:-33px;
}
.nose {
position: absolute;
left:50%;
transform: translateX(-50%);
width:8px;
height:14px;
background:darken($color-skin, 15%);
top:16px;
border-radius: 4px;
}
.mouth {
position: absolute;
background: $color-dark;
width:26px;
height:4px;
border-radius: 0 0 2px 2px;
top:40px;
left:50%;
transform: translateX(-50%) rotate(180deg);
}
.cape {
position: absolute;
background-color: $color-magneto-accent;
width:162px;
height:162px;
top:112px;
left:50%;
transform: translateX(-50%);
border-radius: 50%;
background-clip: padding-box;
border-left:10px solid rgba($color-magnetism, 0);
border-right:10px solid rgba($color-magnetism, 0);
border-top:10px solid rgba($color-magnetism, 0);
animation-name: magnet;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes magnet {
0% {
border-top-color: rgba($color-magnetism, 0);
border-left-color: rgba($color-magnetism, 0);
border-right-color: rgba($color-magnetism, 0);
}
10% {
border-top-color: rgba($color-magnetism, .5);
border-left-color: rgba($color-magnetism, .5);
border-right-color: rgba($color-magnetism, .5);
}
20% {
border-top-color: rgba($color-magnetism, 0);
border-left-color: rgba($color-magnetism, 0);
border-right-color: rgba($color-magnetism, 0);
}
40% {
border-top-color: rgba($color-magnetism, .75);
border-left-color: rgba($color-magnetism, .75);
border-right-color: rgba($color-magnetism, .75);
}
60% {
border-top-color: rgba($color-magnetism, 0);
border-left-color: rgba($color-magnetism, 0);
border-right-color: rgba($color-magnetism, 0);
}
70% {
border-top-color: rgba($color-magnetism, .5);
border-left-color: rgba($color-magnetism, .5);
border-right-color: rgba($color-magnetism, .5);
}
80% {
border-top-color: rgba($color-magnetism, 0);
border-left-color: rgba($color-magnetism, 0);
border-right-color: rgba($color-magnetism, 0);
}
100% {
border-top-color: rgba($color-magnetism, 1);
border-left-color: rgba($color-magnetism, 1);
border-right-color: rgba($color-magnetism, 1);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment