CodePen Embed - Gameboy (full CSS)

#container
    #back
    #border
    #card3
    #card2
    #chip2
    #screenBack
    #card1
    #speaker
    #chip
    #chipPinL
    #chipPinR
    #ec1
    #volumeWheelBack
    #volumeWheel
    #joystickBack
    #buttonsABBack
    #buttonsSSBack
    #jackBack
    #jack
    #ec2
    #powerBack
    #power
    #box
    #screen
    #screen2
    #joystickCross1
    #joystickCross2
    #buttonsSS
    #buttonsSSText
    #buttonsAB
    #buttonsABText
    #gameboyText GAME BOY
    #powerLed
    #speakerFilter

View Compiled

@import "compass/css3";

@font-face{
  font-family: "gyre";
  src: url('http://ff.static.1001fonts.net/t/e/tex-gyre-adventor.bold-italic.otf?#iefix') format("opentype");
}

@mixin animation($name, $duration, $repeat) {
  -webkit-animation: $name $duration $repeat;
     -moz-animation: $name $duration $repeat;
       -o-animation: $name $duration $repeat;
          animation: $name $duration $repeat;
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

body {
  background-color: #dfbf5c;
}

#container {
  position: relative;
  margin: auto;
  width: 130px;
  height: 220px;
}

#back {
  position: absolute;
  bottom: 0;
  background-color: #c1bdb7;
  box-shadow: 5px 5px 0 0 #c7ab52;
  @include animation(backAnim, 5s, infinite);
}

@include keyframes(backAnim) {
  0% {
    width: 8px;
    height: 68px;
  }
  4% {
    width: 100px;
    height: 75px;
  }
  5% {
    width: 125px;
    height: 80px;
    border-radius: 3px 3px 20px 3px;
  }
  11%, 100% {
    height: 206px;
    width: 125px;
    border-radius: 3px 3px 20px 3px;
  }
}

#speaker
{
  position: absolute;
  background-color: #646060;
  @include animation(speakerAnim, 5s, infinite);
}

@include keyframes(speakerAnim) {
  0%, 6% {
    width: 0px;
    height: 0px;
    bottom: 22px;
    left: 103px;
  }
  11% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 15px #484848;
  }
  14%, 100% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 8px #484848;
  }
}

#card1
{
  position: absolute;
  left: 15px;
  background-color: #5eaf89;
  @include animation(card1Anim, 5s, infinite);
}

@include keyframes(card1Anim) {
  0%, 8% {
    height: 0px;
    width: 0px;
    bottom: 64px;
  }
  9% {
    height: 17px;
    width: 15px;
    bottom: 64px;
  }
  12%{
    height: 113px;
    width: 15px;
    bottom: 17px;
  }
  18%, 100% {
    height: 113px;
    width: 95px;
    bottom: 17px;
  }
}

#border
{
  position: absolute;
  bottom: 2px;
  right: 7px;
  border: 2px solid #646060;
  border-radius: 3px 3px 20px 3px;
  @include animation(borderAnim, 5s, infinite);
}

@include keyframes(borderAnim) {
  0%, 8% {
    height: 0px;
    width: 0px;
    border: none;
  }
  9% {
    height: 40px;
    width: 10px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  13% {
    height: 40px;
    width: 117px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  17% {
    height: 198px;
    width: 117px;
    border-right: 2px solid #646060;
    border-left: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
  }
  18%, 100% {
    height: 198px;
    width: 117px;
    border: 2px solid #646060;
  }
}

#card2
{
  position: absolute;
  bottom: 6px;
  left: 7px;
  width: 10px;
  height: 20px;
  background-color: #646060;
  @include animation(card2Anim, 5s, infinite);
}

@include keyframes(card2Anim) {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  13% {
    height: 20px;
    width: 10px;
  }
  21%, 100% {
    height: 20px;
    width: 78px;
  }
}

#card3
{
  position: absolute;
  bottom: 48px;
  left: 8px;
  height: 5px;
  background-color: #3c9b66;
  @include animation(card3Anim, 5s, infinite);
}

@include keyframes(card3Anim) {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  15% {
    height: 5px;
    width: 110px;
  }
  23%, 100% {
    height: 150px;
    width: 110px;
  }
}

#chip
{
  position: absolute;
  bottom: 46px;
  left: 54px;
  width: 4px;
  height: 4px;
  background-color: #484848;
  @include animation(chipAnim, 5s, infinite);
}

@include keyframes(chipAnim) {
  0%, 15% {
    height: 0px;
    width: 0px;
  }
  16% {
    height: 4px;
    width: 4px;
    bottom: 46px;
    left: 54px;
  }
  20%, 100% {
    height: 22px;
    width: 22px;
    bottom: 37px;
    left: 45px;
  }
}

#chip2
{
  position: absolute;
  bottom: 132px;
  left: 60px;
  width: 4px;
  height: 12px;
  background-color: #484848;
  @include animation(chip2Anim, 5s, infinite);
}

@include keyframes(chip2Anim) {
  0%, 16% {
    height: 0px;
    width: 0px;
  }
  17% {
    height: 12px;
    width: 4px;
    bottom: 132px;
    left: 60px;
  }
  23% {
    height: 12px;
    width: 60px;
    bottom: 132px;
    left: 32px;
  }
  30%, 100% {
    height: 12px;
    width: 60px;
    bottom: 160px;
    left: 32px;
  }
}

#volumeWheelBack
{
  position: absolute;
  left: 108px;
  bottom: 157px;
  width: 10px;
  height: 10px;
  background-color: #645d5f;
  @include animation(volumeWheelBackAnim, 5s, infinite);
}

@include keyframes(volumeWheelBackAnim) {
  0%, 17% {
    height: 0px;
    width: 0px;
    left: 113px;
    bottom: 162px;
  }
  21%, 25% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 157px;
  }
  30%, 100% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 167px;
  }
}

#volumeWheel
{
  position: absolute;
  left: 108px;
  bottom: 157px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #b2aea9;
  box-shadow: inset 0px 0px 0px 5px #dddddd;
  @include animation(volumeWheelAnim, 5s, infinite);
}

@include keyframes(volumeWheelAnim) {
  0%, 18% {
    height: 1px;
    width: 1px;
    left: 115px;
    bottom: 159px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  22% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  25% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
  30%, 100% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 164px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
}

#chipPinL
{
  position: absolute;
  left: 43px;
  bottom: 54px;
  width: 4px;
  height: 2px;
  background-color: #dddddd;
  box-shadow: 0px 3px #dddddd;
  @include animation(chipPinAnimL, 5s, infinite);
}

@include keyframes(chipPinAnimL) {
  0%, 19% {
    width: 0px;
  }
  20% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  21% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  22%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}

#chipPinR
{
  position: absolute;
  left: 65px;
  bottom: 54px;
  width: 4px;
  height: 2px;
  background-color: #dddddd;
  box-shadow: 0px 3px #dddddd;
  @include animation(chipPinAnimR, 5s, infinite);
}

@include keyframes(chipPinAnimR) {
  0%, 22% {
    width: 0px;
  }
  23% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  24% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  25%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}

#ec1
{
  position: absolute;
  left: 24px;
  bottom: 122px;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #484848;
  @include animation(ec3Anim, 5s, infinite);
}

@include keyframes(ec3Anim) {
  0%, 18% {
    width: 0px;
  }
  20% {
    width: 4px;
    height: 4px;
  }
  22% {
    box-shadow: 8px 0px #484848;
  }
  24% {
    box-shadow: 8px 0px #484848, 16px 0px #484848;
  }
  26% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848;
  }
  28% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848;
  }
  30%, 100% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848, 40px 0px #484848;
  }
}

#joystickBack
{
  position: absolute;
  left: 8px;
  bottom: 47px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: #dddddd;
  @include animation(joystickBackAnim, 5s, infinite);
}

@include keyframes(joystickBackAnim) {
  0%, 23% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  28%, 100% {
    left: 8px;
    bottom: 47px;
    width: 36px;
    height: 36px;
  }
}

#joystickCross1
{
  position: absolute;
  left: 11px;
  bottom: 60px;
  width: 30px;
  height: 10px;
  border-radius: 1px;
  background-color: #484848;
  @include animation(joystickCrossAnim, 5s, infinite);
}

#joystickCross2
{
  position: absolute;
  left: 11px;
  bottom: 60px;
  width: 30px;
  height: 10px;
  border-radius: 1px;
  background-color: #484848;
  @include rotate(90deg);
  @include animation(joystickCrossAnim, 5s, infinite);
}

@include keyframes(joystickCrossAnim) {
  0%, 26% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  33%, 100% {
    left: 11px;
    bottom: 60px;
    width: 30px;
    height: 10px;
  }
}

#buttonsABBack {
  position: absolute;
  left: 70px;
  bottom: 55px;
  width: 50px;
  height: 22px;
  border-radius: 11px;
  background-color: #dddddd;
  box-shadow: inset 0px 0px 0px 2px #a9a9a9;
  @include rotate(160deg);
  @include animation(buttonsABBackAnim, 5s, infinite);
}

@include keyframes(buttonsABBackAnim) {
  0%, 24% {
    left: 95px;
    bottom: 67px;
    width: 0px;
    height: 0px;
    @include rotate(220deg);
  }
  29% {
    left: 70px;
    bottom: 55px;
    width: 50px;
    height: 22px;
    -webkit-transform:rotate(160deg);
    @include rotate(160deg);
  }
  33%, 100% {
    box-shadow: inset 0px 0px 0px 2px #a9a9a9;
  }
}

#buttonsAB {
  position: absolute;
  left: 74px;
  bottom: 53px;
  width: 16px;
  height: 16px;
  border-radius: 11px;
  background-color: #484848;
  box-shadow: 26px -10px #484848;
  @include animation(buttonsABAnim, 5s, infinite);
}

@include keyframes(buttonsABAnim) {
  0%, 28% {
    left: 81px;
    bottom: 61px;
    width: 0px;
    height: 0px;
    box-shadow: 26px -10px #484848;
  }
  33%, 100% {
    left: 74px;
    bottom: 53px;
    width: 16px;
    height: 16px;
    box-shadow: 26px -10px #484848;
  }
}

#buttonsABText {
  @include animation(buttonsABTextAnim, 5s, infinite);
}

#buttonsABText::before {
  content: "A";
  position: absolute;
  left: 106px;
  bottom: 50px;
  font: 8px "Arial";
  color: #606060;
}

#buttonsABText::after {
  content: "B";
  position: absolute;
  left: 80px;
  bottom: 40px;
  font: 8px "Arial";
  color: #606060;
}

@include keyframes(buttonsABTextAnim) {
  0%, 73% {
    visibility: hidden;
  }
  74%, 100% {
    bisibility: visible;
  }
}

#buttonsSSText {
  @include animation(buttonsSSTextAnim, 5s, infinite);
}

#buttonsSSText::before {
  content: "select";
  position: absolute;
  left: 45px;
  bottom: 15px;
  font: 7px "Arial";
  color: #606060;
}

#buttonsSSText::after {
  content: "start";
  position: absolute;
  left: 68px;
  bottom: 15px;
  font: 7px "Arial";
  color: #606060;
}

@include keyframes(buttonsSSTextAnim) {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    bisibility: visible;
  }
}

#buttonsSSBack {
  position: absolute;
  left: 45px;
  bottom: 26px;
  width: 40px;
  height: 10px;
  background-color: #dddddd;
  @include animation(buttonsSSBackAnim, 5s, infinite);
}

@include keyframes(buttonsSSBackAnim) {
  0%, 27% {
    left: 65px;
    bottom: 26px;
    width: 0px;
    height: 10px;
  }
  33%, 100% {
    left: 45px;
    bottom: 26px;
    width: 40px;
    height: 10px;
  }
}

#buttonsSS {
  position: absolute;
  border-radius: 2px;
  background-color: #484848;
  @include animation(buttonsSSAnim, 5s, infinite);
}

@include keyframes(buttonsSSAnim) {
  0%, 34% {
    left: 52px;
    bottom: 31px;
    width: 0px;
    height: 0px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  41%{
    left: 45px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  44%{
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 20px 0px #a9a8a6;
  }
  49%, 100% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 0px #a9a8a6, 20px 0px 0px 0px #484848, 20px 0px #a9a8a6;
  }
}

#screenBack {
  position: absolute;
  background-color: #dddddd;
  border-radius: 2px;
  @include animation(screenBackAnim, 5s, infinite);
}

@include keyframes(screenBackAnim) {
  0%, 25% {
    left: 63px;
    bottom: 125px;
    width: 0px;
    height: 64px;
  }
  31%, 100% {
    left: 21px;
    bottom: 125px;
    width: 84px;
    height: 64px;
  }
}

#screen {
  position: absolute;
  background-color: #494949;
  border-radius: 4px 4px 10px 4px;
  @include animation(screenAnim, 5s, infinite);
}

@include keyframes(screenAnim) {
  0%, 28% {
    left: 68px;
    bottom: 131px;
    width: 0px;
    height: 0px;
  }
  33%, 36% {
    left: 26px;
    bottom: 100px;
    width: 74px;
    height: 64px;
  }
  40%, 42% {
    left: 26px;
    bottom: 114px;
    width: 74px;
    height: 64px;
  }
  48%, 100% {
    left: 8px;
    bottom: 100px;
    width: 110px;
    height: 96px;
  }
}

#jackBack {
  position: absolute;
  background-color: #646060;
  @include animation(jackBackAnim, 5s, infinite);
}

@include keyframes(jackBackAnim) {
  0%, 21% {
    left: 11px;
    bottom: 136px;
    width: 0px;
    height: 0px;
  }
  25%, 31% {
    left: 6px;
    bottom: 132px;
    width: 12px;
    height: 12px;
  }
  36%, 100% {
    left: 6px;
    bottom: 138px;
    width: 12px;
    height: 12px;
  }
}

#jack {
  position: absolute;
  background-color: #494949;
  border-radius: 7px;
  @include animation(jackAnim, 5s, infinite);
}

@include keyframes(jackAnim) {
  0%, 23% {
    left: 6px;
    bottom: 135px;
    width: 0px;
    height: 0px;
  }
  27%, 31% {
    left: 1px;
    bottom: 131px;
    width: 14px;
    height: 14px;
  }
  36%, 100% {
    left: 1px;
    bottom: 137px;
    width: 14px;
    height: 14px;
  }
}

#screen2 {
  position: absolute;
  background-color: #b7b28f;
  border-radius: 2px;
  @include animation(screen2Anim, 5s, infinite);
}

@include keyframes(screen2Anim) {
  0%, 44% {
    left: 59px;
    bottom: 151px;
    width: 0px;
    height: 0px;
  }
  48% {
    left: 54px;
    bottom: 146px;
    width: 10px;
    height: 10px;
  }
  52% {
    left: 22px;
    bottom: 146px;
    width: 80px;
    height: 10px;
  }
  60%, 100% {
    left: 22px;
    bottom: 112px;
    width: 80px;
    height: 74px;
  }
}

#box {
  position: absolute;
  background-color: #5f98c6;
  border-radius: 3px 3px 20px 3px;
  height: 206px;
  width: 125px;
  bottom: 0px;
  @include animation(boxAnim, 5s, infinite);
}

@include keyframes(boxAnim) {
  0%, 67% {
    height: 0px;
    width: 125px;
    bottom: 206px;
  }
  80%, 100% {
    height: 206px;
    width: 125px;
    bottom: 0px;
  }
}

#gameboyText {
  position: absolute;
  left: 23px;
  bottom: 93px;
  height: 20px;
  width: 40px;
  font: 7px "gyre";
  color: #b7b28f;
  clip:rect(0px, 0px, 40px, 20px);
  @include animation(gameboyTextAnim, 5s, infinite);
}

@include keyframes(gameboyTextAnim) {
  0%, 55% {
    clip:rect(0px, 0px, 20px, 0px);
  }
  60%, 100% {
    clip:rect(0px, 40px, 20px, 0px);
  }
}

#powerBack {
  position: absolute;
  background-color: #494949;
  width: 15px;
  height: 9px;
  left: 6px;
  bottom: 197px;
  @include animation(powerBackAnim, 5s, infinite);
}

@include keyframes(powerBackAnim) {
  0%, 23% {
    height: 0px;
  }
  30%, 100% {
    height: 9px;
  }
}

#power {
  position: absolute;
  background-color: #494949;
  border-radius: 4px 4px 0px 0px / 2px 2px 0px 0px;
  width: 8px;
  height: 6px;
  visibility: visible;
  @include animation(powerAnim, 5s, infinite);
}

@include keyframes(powerAnim) {
  0%, 42% {
    visibility: hidden;
    left: 9px;
    bottom: 197px;
  }
  43% {
    visibility: visible;
    left: 9px;
    bottom: 197px;
  }
  46%, 90% {
    visibility: visible;
    left: 9px;
    bottom: 202px;
  }
  92%, 100% {
    visibility: visible;
    left: 15px;
    bottom: 202px;
  }
}

#powerLed {
  position: absolute;
  background-color: #202020;
  border-radius: 2px;
  width: 4px;
  height: 4px;
  left: 10px;
  bottom: 180px;
  @include animation(powerLedAnim, 5s, infinite);
}

@include keyframes(powerLedAnim) {
  0%, 49% {
    width: 0px;
    height: 0px;
    left: 12px;
    bottom: 172px;
  }
  52%, 91% {
    background-color: #202020;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
  92%, 100% {
    background-color: red;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
}

#speakerFilter {
  position: absolute;
  background-color: #555;
  border-radius: 2px;
  width: 4px;
  height: 4px;
  left: 95px;
  bottom: 20px;
  visibility: visible;
  box-shadow: 3px -3px #555, 6px -6px #555, 9px -9px #555, 0px 6px #555,3px 3px #555, 6px 0px #555, 9px -3px #555, 12px -6px #555, 15px -9px #555, 3px 9px #555, 6px 6px #555, 9px 3px #555, 12px 0px #555, 15px -3px #555, 18px -6px #555, 9px 9px #555, 12px 6px #555, 15px 3px #555, 18px 0px #555;
  @include animation(speakerFilterAnim, 5s, infinite);
}

@include keyframes(speakerFilterAnim) {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    visibility: visible;
  }
}

View Compiled

This Pen is owned by heero on CodePen.

See more by @heero on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.