Castle Face

castle-face.markdown

Castle Face

also a pretty fantastic record label

A Pen by Adam Kuhn on CodePen.

License.

index.haml

.doorway
.doorway
.doorway

style.scss

$gray: #e2dfd9;
$blue: #183e61;
$gold: #dfad55;
$white: #fff;

body{
  background:$gold;
  display:flex;
  align-items:center; 
  justify-content:center;
  width:100vw;
  height:100vh;
  position:relative;
  overflow:hidden;
  &:before{
    content:'';
    position:absolute;
    width:120%;
    height:120%;
    left:-70%;
    top:-70%;
    background:radial-gradient(circle at center, transparent 50%, $gold 50%), radial-gradient(circle at center, $blue, $blue 2.5px, $gold 2.5px, $gold 3px);
    background-size:100%, 20px 24px;
    animation:spinning 120s linear infinite;
    @keyframes spinning{
      to{
        transform:rotate(360deg);
      }
    }
  }
  
  .doorway{
    top:50%;
    overflow:hidden;
    position:absolute;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    margin-top:-125px;
    display:block;
    width:150px;
    height:200px;
    border:4px solid $blue;
    border-radius:100px 100px 0 0;
    box-shadow:0px 0px 0px 40px $gold;
    &:first-of-type{
      margin-left:-125px;
    }
    &:nth-of-type(2){
      margin-left:125px;
    }
    &:nth-of-type(3){
      margin-top:125px;
      border-radius:0 0 100px 100px;
      width:400px;
      height:150px;
      background:$blue;
      box-shadow:inset 40px 0px 0px $gray;
      &:after{
        right:60px;
        width: 0;
        height: 0;
        box-shadow:none;
        border-radius:0px;
        border-style: solid;
        border-width: 50px 30px 0 30px;
        border-color: $gray transparent transparent transparent;
      }
      &:before{
        content:'';
        position:absolute;
        animation:none;
        box-shadow:inset 0px 0px 0px 3px $gray, 0px 0px 0px 3px $blue;
        width:50px;
        height:50px;
        background:radial-gradient(circle at center, $gray 14px, $blue 14px), radial-gradient(circle at center, $blue 15px, $gray 15px), $gray;
        background-position:-25px;
        border-radius:100%;
        left:10px;
        top:0px;
        animation:rolling 2s linear infinite;
        animation-direction:alternate;
        @keyframes rolling{
          0%{
            transform:translateX(0) translateY(0) rotate(0deg);
          }
          15%{
            transform:translateX(30px) translateY(90px) rotate(120deg);
          }
          17%{
            transform:translateX(40px) translateY(100px) rotate(150deg);
          }
          60%{
            transform:translateX(240px) translateY(100px) rotate(600deg);
          }
          64%{
            transform:translateX(260px) translateY(100px) rotate(670deg);
          }
          84%{
            transform:translateX(340px) translateY(90px) rotate(800deg);
          }
          100%{
            transform:translateX(340px) translateY(0px) rotate(880deg);
          }
          
        }
      }
    }
    &:after{
      content:'';
      position:absolute;
      z-index:-2;
      width:100%;
      height:100%;
      background:$blue;
      border-radius:100px 100px 0 0;
      box-shadow:inset 40px 0px 0px $gray, inset 43px 2px 0px $blue;
      
    }
    &:before{
      content:'';
      position:absolute;
      width:100%;
      height:30px;
      background:$gray;
      bottom:0;
      z-index:-1;
      box-shadow:-3px -3px 0px $blue, 20px -33px 0px $gray, 22px -31px 0px 5px $blue,  40px -63px 0px $gray, 42px -61px 0px 5px $blue,  60px -93px 0px $gray, 62px -91px 0px 5px $blue, 80px -123px 0px $gray, 82px -121px 0px 5px $blue, 100px -153px 0px $gray, 102px -151px 0px 5px $blue, 120px -183px 0px $gray, 122px -181px 0px 5px $blue, 0px 33px 0px 0px $gray, 0px 33px 0px 3px $blue;
      transition:0.3s;
      animation:stepping 2s linear infinite;
      @keyframes stepping{
        0%{
          box-shadow:-3px -3px 0px $blue, 20px -33px 0px $gray, 22px -31px 0px 5px $blue,  40px -63px 0px $gray, 42px -61px 0px 5px $blue,  60px -93px 0px $gray, 62px -91px 0px 5px $blue, 80px -123px 0px $gray, 82px -121px 0px 5px $blue, 100px -153px 0px $gray, 102px -151px 0px 5px $blue, 120px -183px 0px $gray, 122px -181px 0px 5px $blue, 0px 33px 0px 0px $gray, 0px 33px 0px 3px $blue;
        }
        100%{
          transform:translateY(-30px) translateX(20px);
          box-shadow:-3px -3px 0px $blue, 20px -33px 0px $gray, 22px -31px 0px 5px $blue,  40px -63px 0px $gray, 42px -61px 0px 5px $blue,  60px -93px 0px $gray, 62px -91px 0px 5px $blue, 80px -123px 0px $gray, 82px -121px 0px 5px $blue, 100px -153px 0px $gray, 102px -151px 0px 5px $blue, 120px -183px 0px $gray, 122px -181px 0px 5px $blue, -20px 33px 0px 0px $gray, -20px 33px 0px 3px $blue;
        }
      }
    }
  }
}