CodePen Embed - CSS Advent Calendar

.wrapper
  .advent-calendar
    p Click the date!
    .advent-calendar__top
    .advent-calendar__top-inner
      .santa
        .santa__hat
          - for (var i = 0; i < 2; i++)
            .santa__hat-part
        .santa__face
          .santa__eyebrows
          .santa__eye
          .santa__nose
          .santa__cheek
          .santa__beard
            - for (var i = 0; i < 3; i++)
              .santa__beard-part
        .santa__body
      .present
      .snow-man
        .snow-man__body
          .snow-man__hat
          .snow-man__face
          .snow-man__hand
          .snow-man__scarf
      .house
        .lease
          .lease__ribbon
          .lease__decoration
            - for (var j = 0; j < 3; j++)
              .lease__decoration-part
        .house__chimney
          .snow
        .house__bottom
          .house__window
          .house__door
        .house__top
          .house__roof
            .snow
      .snow-ball-wrapper
        - for (var i = 0; i < 35; i++)
          .snow-ball(style=`left: ${12*i}px;`)
    .advent-calendar__box
      .advent-calendar__wapper
        - for (var i = 1; i <= 25; i++)
          .advent-calendar__item
            input.box(type="checkbox" name=`${i}` value=`${i}` id=`${i}`)
            label(for=`${i}`)
              .contents
                .content(class=`content--${i}`)
                  span
                    span
                  span
                  span
              .door: span #{i}

View Compiled

@import url("https://fonts.googleapis.com/css?family=Cute+Font&display=swap");
$GRAY_COLOR: #e7e7e7;
$DARK_GRAY_COLOR: #d4d4d4;
$MAIN_WHITE_COLOR: #f1f1f1;
$BLACK_COLOR: #000;
$WHITE_COLOR: #fff;
$BLUE_COLOR: #c5e3ec;
// house
$ROOF_HEIGHT: 145px;
$ROOF_WIDHT: 500px;
$HOUSE_COLOR: #c4996f;
$HOUSE_ROOF_COLOR: #660f14;
$HOUSE_DOOR_COLOR: #660f14;
$HOUSE_WINDOW_COLOR: #f5ca95;
// santa
$SANTA_CLOTHE: #d63527;
$SANTA_FACE_COLOR: #fde2b7;
$SANTA_BEARD_COLOR: #fff;
$SANTA_EYEBROWS_COLOR: #fff;
$SANTA_NOSE_COLOR: #f7d194;
$SANTA_CHEEK_COLOR: #f4cfe3;
// snow-man
$SNOW_MAN_HAT_COLOR: #87d3dd;
$SNOW_MAN_COLOR: #fff;
// snow-ball
$SNOW_BALL_COLOR: rgba(255, 255, 255, 0.3);
// cookie
$GINGER_COOKIE_COLOR: #c4996f;
$GINGER_COOKIE_COLOR2: #ecba78;
// candy
$CANDY_COLOR: #bd1733;
$CANDY_COLOR2: #f3c42f;
// donuts
$DOUGHNUTS_COLOR: #f5ca95;
$DOUGHNUTS_COLOR2: #bd1733;
$DOUGHNUTS_COLOR3: #ca9e69;
$DOUGHNUTS_COLOR4: #e999d1;
// muffin
$MUFFIN_COLOR: #efb11d;
$MUFFIN_COLOR2: #c64b5f;
$MUFFIN_COLOR3: #f5ca95;
$MUFFIN_COLOR4: #6b4f41;
$MUFFIN_CREAM_COLOR: #fff3e5;
$MUFFIN_CREAM_COLOR2: #f7d2f2;
// socks
$SOCKS_COLOR: #ff4242;
$SOCKS_COLOR2: #14b148;

body {
  background: #012652;
  font-family: "Cute Font", sans-serif;
}

* {
  &:before,
  &:after {
    content: "";
    position: absolute;
  }
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@mixin snow-animation($duration, $delay) {
  -webkit-animation: #{$duration}s ease-in-out #{$delay}s infinite snowMove;
  animation: #{$duration}s ease-in-out #{$delay}s infinite snowMove;
}

.wrapper {
  position: relative;
  width: 510px;
  height: 525px;
  margin: auto;
}

.advent-calendar {
  position: absolute;
  top: calc(50% - 245px);
  left: calc(50% - 185px);
  width: 390px;
  padding: 0 10px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  > p {
    position: absolute;
    color: #fff;
    font-size: 23px;
    left: 0;
  }
  &__top {
    position: absolute;
    top: 0;
    left: -60px;
    width: $ROOF_WIDHT;
    height: $ROOF_HEIGHT;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: $WHITE_COLOR;
  }
  &__top-inner {
    position: absolute;
    top: 15px;
    left: -20px;
    width: $ROOF_WIDHT - 80px;
    height: $ROOF_HEIGHT - 25px;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: #aaa;
  }
  &__box {
    padding-top: $ROOF_HEIGHT;
  }
  &__wapper {
    @extend .flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border: 10px solid $WHITE_COLOR;
  }
  &__item {
    &:nth-child(odd) {
      .door {
        background: $BLUE_COLOR;
      }
    }
  }
}

.box {
  display: none;
  &:checked {
    + label {
      .door {
        transform: rotatey(-5deg) rotatex(85deg);
      }
    }
  }
}

label {
  position: relative;
  @extend .flex;
  width: 70px;
  height: 70px;
  font-size: 50px;
}

.door {
  position: absolute;
  width: 100%;
  height: 100%;
  background: $MAIN_WHITE_COLOR;
  cursor: pointer;
  border: 1px solid $WHITE_COLOR;
  transform-origin: top center;
  transition: 1s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10;
  span {
    display: block;
    text-align: center;
    line-height: 1;
    margin-top: 10px;
    font-size: 35px;
  }
  &:before {
    bottom: 10px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    background: $GRAY_COLOR;
    -webkit-box-shadow: 1px -1px 0px 1px $DARK_GRAY_COLOR inset;
    box-shadow: 1px -1px 0px 1px $DARK_GRAY_COLOR inset;
    border-radius: 50%;
  }
}

.contents {
  width: 100%;
  height: 100%;
  line-height: 1;
  border: 1px solid $GRAY_COLOR;
  background: $DARK_GRAY_COLOR;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 10px;
  left: 14px;
  width: 40px;
  height: 55px;
  span {
    position: absolute;
  }
  &:hover {
    animation: 2s ease-in-out infinite contentMove;
  }
  &--1,
  &--11,
  &--19,
  &--23 {
    span {
      top: 0;
      left: 9px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: $GINGER_COOKIE_COLOR;
      &:nth-of-type(1) {
        > span {
          top: 9px;
          left: 5px;
          width: 10px;
          height: 5px;
          border-radius: 50%;
          border-bottom: 1px solid $WHITE_COLOR;
          &:before,
          &:after {
            top: -3px;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: $WHITE_COLOR;
          }
          &:after {
            left: 7px;
          }
        }
      }
      &:nth-of-type(2) {
        top: 19px;
        left: 0;
        width: 40px;
        height: 10px;
        border-radius: 20px;
        &:before,
        &:after {
          top: -3px;
          width: 0;
          height: 0;
          border-top: 3px solid transparent;
          border-bottom: 3px solid transparent;
        }
        &:before {
          border-left: 5px solid $WHITE_COLOR;
          left: 14px;
        }
        &:after {
          border-right: 5px solid $WHITE_COLOR;
          right: 16px;
        }
      }
      &:nth-of-type(3) {
        top: 32px;
        left: 9px;
        background: transparent;
        &:before,
        &:after {
          top: 0px;
          width: 28px;
          height: 10px;
          background: $GINGER_COOKIE_COLOR;
          border-radius: 20px;
        }
        &:before {
          -webkit-transform: rotate(68deg);
          transform: rotate(68deg);
          left: 1px;
        }
        &:after {
          -webkit-transform: rotate(-68deg);
          transform: rotate(-68deg);
          right: 1px;
        }
      }
    }
  }
  &--4,
  &--8,
  &--15,
  &--16,
  &--22 {
    > span {
      width: 25px;
      height: 20px;
      &:nth-of-type(1) {
        left: 5px;
        bottom: 17px;
        width: 30px;
        height: 20px;
        background: $CANDY_COLOR;
        border-radius: 50%;
        overflow: hidden;
        span {
          top: -1px;
          left: 12px;
          width: 3px;
          height: 25px;
          background: $WHITE_COLOR;
          border-radius: 0;
          -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
          &:before,
          &:after {
            width: 3px;
            height: 25px;
            background: $WHITE_COLOR;
            border-radius: 0;
          }
          &:before {
            top: 0;
            left: -8px;
          }
          &:after {
            top: -4px;
            left: 8px;
          }
        }
      }
      &:nth-of-type(2),
      &:nth-of-type(3) {
        top: 18px;
        width: 0;
        height: 0;
        background: transparent;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
      }
      &:nth-of-type(2) {
        left: -4px;
        border-left: 13px solid $CANDY_COLOR;
      }
      &:nth-of-type(3) {
        right: -4px;
        border-right: 13px solid $CANDY_COLOR;
      }
    }
  }
  &--4,
  &--15,
  &--22 {
    > span {
      &:nth-of-type(1) {
        background: $CANDY_COLOR2;
        span {
          background: $WHITE_COLOR;
          &:before,
          &:after {
            background: $WHITE_COLOR;
          }
        }
      }
      &:nth-of-type(2) {
        left: -4px;
        border-left: 13px solid $CANDY_COLOR2;
      }
      &:nth-of-type(3) {
        right: -4px;
        border-right: 13px solid $CANDY_COLOR2;
      }
    }
  }
  &--3,
  &--10,
  &--14,
  &--17 {
    > span {
      &:nth-of-type(1) {
        left: 0;
        top: 5px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: $DOUGHNUTS_COLOR;
        overflow: hidden;
        &:before,
        &:after {
          z-index: 1;
        }
        &:before {
          top: 0;
          left: 0;
          width: 40px;
          height: 21px;
          background: $DOUGHNUTS_COLOR2;
          border-radius: 30%;
        }
        &:after {
          top: 15px;
          left: 13px;
          width: 13px;
          height: 13px;
          background: $GRAY_COLOR;
          border-radius: 50%;
        }
      }
      &:nth-of-type(2) {
        top: 10px;
        left: 13px;
        width: 3px;
        height: 3px;
        background: #f4cfe3;
        border-radius: 50%;
        z-index: 10;
        &:before,
        &:after {
          width: 3px;
          height: 3px;
          border-radius: 50%;
        }
        &:before {
          top: 6px;
          left: -6px;
          background: #f4cfe3;
        }
        &:after {
          top: -1px;
          left: 10px;
          background: $WHITE_COLOR;
        }
      }
      &:nth-of-type(3) {
        top: 14px;
        left: 28px;
        width: 3px;
        height: 3px;
        background: #f4cfe3;
        border-radius: 50%;
        z-index: 10;
        &:before,
        &:after {
          width: 3px;
          height: 3px;
          border-radius: 50%;
        }
        &:before {
          top: -1px;
          left: -10px;
          background: #f4cfe3;
        }
        &:after {
          top: 5px;
          left: 3px;
          background: $WHITE_COLOR;
        }
      }
    }
  }
  &--3,
  &--14 {
    > span {
      background: $DOUGHNUTS_COLOR3;
      &:nth-of-type(1) {
        &:before {
          background: $DOUGHNUTS_COLOR4;
        }
      }
    }
  }
  &--6,
  &--9,
  &--12,
  &--18,
  &--24 {
    top: 6px;
    > span {
      left: 7px;
      bottom: 0;
      width: 25px;
      height: 20px;
      &:nth-of-type(1) {
        left: 7px;
        width: 25px;
        height: 20px;
        background: $MUFFIN_COLOR2;
        &:before,
        &:after {
          top: 0px;
          width: 0;
          height: 0;
          border-top: 0 solid transparent;
          border-bottom: 19px solid transparent;
        }
        &:before {
          border-right: 7px solid $MUFFIN_COLOR2;
          left: -7px;
        }
        &:after {
          border-left: 7px solid $MUFFIN_COLOR2;
          right: -7px;
        }
      }
      &:nth-of-type(2) {
        left: 0;
        bottom: 14px;
        width: 39px;
        height: 22px;
        background: $MUFFIN_COLOR;
        border-radius: 50% 50% 30% 30%;
        &:before,
        &:after {
          top: 0px;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          z-index: 10;
        }
        &:before {
          background: #87d3dd;
          left: 8px;
          top: -4px;
        }
        &:after {
          background: #f4cfe3;
          left: 15px;
        }
      }
      &:nth-of-type(3) {
        left: 3px;
        bottom: 24px;
        width: 31px;
        height: 13px;
        background: $MUFFIN_CREAM_COLOR;
        border-radius: 50%;
        &:before,
        &:after {
          height: 10px;
          background: $MUFFIN_CREAM_COLOR;
        }
        &:before {
          top: -4px;
          left: 1px;
          width: 24px;
          height: 12px;
          border-radius: 50%;
        }
        &:after {
          top: -10px;
          left: 5px;
          height: 17px;
          width: 11px;
          border-radius: 80% 10% 55% 50%/55% 10% 80% 50%;
          -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
        }
      }
    }
  }
  &--6,
  &--12,
  &--24 {
    > span {
      &:nth-of-type(1) {
        background: $MUFFIN_COLOR4;
        &:before {
          border-right: 7px solid $MUFFIN_COLOR4;
        }
        &:after {
          border-left: 7px solid $MUFFIN_COLOR4;
        }
      }
      &:nth-of-type(2) {
        background: $MUFFIN_COLOR3;
        &:before {
          background: #fff3e5;
        }
        &:after {
          background: #87d3dd;
        }
      }
      &:nth-of-type(3) {
        background: $MUFFIN_CREAM_COLOR2;
        &:before,
        &:after {
          background: $MUFFIN_CREAM_COLOR2;
        }
      }
    }
  }
  &--2,
  &--13,
  &--20,
  &--21 {
    > span {
      &:nth-of-type(1) {
        left: 4px;
        bottom: 8px;
        width: 20px;
        height: 35px;
        background: $SOCKS_COLOR;
        border-radius: 0 0 20px 20px;
        transform: rotate(-10deg);
        &:before {
          left: 8px;
          bottom: -12px;
          width: 20px;
          height: 35px;
          background: $SOCKS_COLOR;
          border-radius: 20px;
          -webkit-transform: rotate(-83deg);
          transform: rotate(-83deg);
        }
        &:after {
          left: -1px;
          bottom: 27px;
          width: 23px;
          height: 12px;
          background: $WHITE_COLOR;
          border-radius: 5px;
        }
      }
      span {
        left: 13px;
        bottom: 18px;
        width: 3px;
        height: 3px;
        background: $WHITE_COLOR;
        border-radius: 50%;
        &:before,
        &:after {
          width: 3px;
          height: 3px;
          background: $WHITE_COLOR;
          border-radius: 50%;
        }
        &:before {
          top: -4px;
        }
        &:after {
          top: 4px;
        }
      }
    }
  }
  &--13,
  &--21 {
    > span {
      &:nth-of-type(1) {
        background: $SOCKS_COLOR2;
        &:before {
          background: $SOCKS_COLOR2;
        }
      }
    }
  }
  &--5,
  &--7,
  &--25 {
    span {
      top: 0;
      left: 9px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: $GINGER_COOKIE_COLOR2;
      margin: auto;
      &:nth-of-type(1) {
        > span {
          top: 9px;
          left: 5px;
          width: 10px;
          height: 5px;
          border-radius: 50%;
          border-bottom: 1px solid $WHITE_COLOR;
          &:before,
          &:after {
            top: -3px;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: $WHITE_COLOR;
          }
          &:after {
            left: 7px;
          }
        }
      }
      &:nth-of-type(2) {
        top: 19px;
        left: 0;
        width: 40px;
        height: 10px;
        border-radius: 20px;
        &:before,
        &:after {
          top: -3px;
          width: 0;
          height: 0;
          border-top: 3px solid transparent;
          border-bottom: 3px solid transparent;
        }
        &:before {
          border-left: 5px solid $WHITE_COLOR;
          left: 14px;
        }
        &:after {
          border-right: 5px solid $WHITE_COLOR;
          right: 16px;
        }
      }
      &:nth-of-type(3) {
        top: 31px;
        left: 9px;
        border-radius: 50% 50% 0 0;
        &:before,
        &:after {
          top: 1px;
          width: 28px;
          height: 10px;
          background: $GINGER_COOKIE_COLOR2;
          border-radius: 20px;
        }
        &:before {
          -webkit-transform: rotate(68deg);
          transform: rotate(68deg);
          left: 1px;
        }
        &:after {
          -webkit-transform: rotate(-68deg);
          transform: rotate(-68deg);
          right: 1px;
        }
      }
    }
  }
}

.snow-ball {
  position: absolute;
  transform: translateY(-10px);
  width: 10px;
  height: 10px;
  background: $SNOW_BALL_COLOR;
  border-radius: 50%;
  @include snow-animation(6, 0);
  &:nth-of-type(2n) {
    @include snow-animation(5, 2);
  }
  &:nth-of-type(3n) {
    @include snow-animation(5, 1);
  }
  &:nth-of-type(4n) {
    @include snow-animation(5, 3);
  }
  &:nth-of-type(5n) {
    @include snow-animation(5, 5);
  }
  &:nth-of-type(6n) {
    @include snow-animation(5, 4);
  }
  &:nth-of-type(7n) {
    @include snow-animation(6, 2);
  }
  &:nth-of-type(8n) {
    @include snow-animation(6, 3);
  }
  &:nth-of-type(9n) {
    @include snow-animation(6, 1);
  }
}

.snow-man {
  $base: &;
  position: absolute;
  bottom: -30px;
  right: 100px;
  width: 75px;
  height: 122px;
  z-index: 10;
  overflow: hidden;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
  &__hat {
    position: absolute;
    top: -64px;
    left: 36px;
    width: 20px;
    height: 15px;
    background-color: $SNOW_MAN_HAT_COLOR;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    border-radius: 2px;
    z-index: 10;
    &:before {
      width: 12px;
      height: 8px;
      top: 0px;
      left: 0px;
      border-radius: 5px 0 30px 30px;
      background-color: $WHITE_COLOR;
    }
    &:after {
      width: 11px;
      height: 10px;
      top: 0px;
      left: 10px;
      border-radius: 0 16px 30px 30px;
      background-color: $WHITE_COLOR;
    }
  }
  &__body {
    position: absolute;
    top: 105px;
    &:before {
      content: "";
      position: absolute;
      top: -24px;
      left: 18px;
      width: 45px;
      height: 40px;
      border-radius: 50%;
      background-color: $SNOW_MAN_COLOR;
    }
    &:after {
      content: "";
      position: absolute;
      top: -53px;
      left: 22px;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: $SNOW_MAN_COLOR;
    }
  }
  &__face {
    position: absolute;
    top: -45px;
    left: 31px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: $BLACK_COLOR;
    z-index: 10;
    &:before {
      top: 2px;
      left: 12px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: $BLACK_COLOR;
      z-index: 10;
    }
    &:after {
      top: 7px;
      left: -4px;
      width: 0px;
      height: 0px;
      border-top: 1px solid transparent;
      border-bottom: 3px solid transparent;
      border-right: 12px solid #fe9051;
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  }
  &__hand {
    position: absolute;
    width: 50px;
    height: 15px;
    top: -28px;
    left: 15px;
    &:before,
    &:after {
      background-color: #8e6428;
      width: 3px;
      height: 15px;
    }
    &:before {
      -webkit-transform: rotate(-62deg);
      transform: rotate(-62deg);
      left: 0;
    }
    &:after {
      -webkit-transform: rotate(62deg);
      transform: rotate(62deg);
      right: 0;
    }
  }
  &__scarf {
    position: absolute;
    top: -25px;
    left: 23px;
    width: 34px;
    height: 8px;
    border-radius: 4px 4px 8px 8px;
    background-color: #c74734;
    z-index: 10;
    &:before {
      content: "";
      position: absolute;
      top: 5px;
      right: 3px;
      width: 9px;
      height: 19px;
      border-radius: 4px;
      background-color: #c74734;
    }
    &:after {
      content: "";
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
      position: absolute;
      top: 1px;
      right: 4px;
      width: 9px;
      height: 23px;
      border-radius: 4px;
      background-color: #c74734;
    }
  }
}

.house {
  $base: &;
  position: absolute;
  bottom: -84px;
  left: 87px;
  width: 300px;
  height: 240px;
  z-index: 0;
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  &__roof {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 95px solid $HOUSE_COLOR;
    border-left: 135px solid transparent;
    border-right: 135px solid transparent;
    &:before,
    &:after {
      content: "";
      position: absolute;
      border-radius: 10px;
      border: none;
      background-color: $HOUSE_ROOF_COLOR;
      z-index: 8;
    }
    &:before {
      top: -39px;
      left: -75px;
      width: 8px;
      height: 180px;
      -webkit-transform: rotate(56deg);
      transform: rotate(56deg);
    }
    &:after {
      top: -39px;
      right: -75px;
      width: 8px;
      height: 180px;
      -webkit-transform: rotate(-56deg);
      transform: rotate(-56deg);
    }
    .snow {
      position: absolute;
      z-index: 10;
      &:before,
      &:after {
        top: -53px;
        width: 10px;
        height: 188px;
        background-color: $WHITE_COLOR;
      }
      &:before {
        -webkit-transform: rotate(56deg);
        transform: rotate(56deg);
        left: -78px;
        border-radius: 8px 8px 2px 8px;
      }
      &:after {
        -webkit-transform: rotate(-56deg);
        transform: rotate(-56deg);
        right: -78px;
        border-radius: 8px 8px 8px 2px;
      }
    }
  }
  &__bottom {
    position: absolute;
    bottom: 0;
    left: 27px;
    background-color: $HOUSE_COLOR;
    width: 225px;
    height: 150px;
    &:before,
    &:after {
      width: 0;
      height: 0;
      bottom: 0;
      border-top: 150px solid $HOUSE_COLOR;
    }
    &:before {
      right: -20px;
      border-right: 20px solid transparent;
      border-left: 67px solid transparent;
    }
    &:after {
      left: -20px;
      border-left: 20px solid transparent;
      border-right: 67px solid transparent;
    }
  }
  &__window {
    position: absolute;
    top: 35px;
    right: 15px;
    width: 80px;
    height: 50px;
    background-color: $HOUSE_WINDOW_COLOR;
    overflow: hidden;
    border-radius: 5px;
    &:before,
    &:after {
      content: "";
      position: absolute;
      background-color: $HOUSE_COLOR;
      z-index: 10;
    }
    &:before {
      top: 0;
      left: calc(50% - 2px);
      width: 4px;
      height: 50px;
    }
    &:after {
      top: calc(50% - 2px);
      left: 0;
      width: 80px;
      height: 4px;
    }
  }
  &__door {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: 60px;
    height: 95px;
    background-color: $HOUSE_DOOR_COLOR;
    z-index: 10;
    &:before {
      top: calc(50% - 4px);
      left: 4px;
      background-color: #a76c00;
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }
  }
  &__chimney {
    position: absolute;
    top: 5px;
    right: 35px;
    width: 55px;
    height: 90px;
    background-color: $HOUSE_ROOF_COLOR;
    &:before {
      top: -3px;
      left: -2px;
      width: 103%;
      height: 13px;
      border-radius: 7px;
      background-color: $WHITE_COLOR;
    }
    .snow {
      width: 17px;
      height: 14px;
      top: 5px;
      left: -2px;
      border-radius: 0 30px 30px 30px;
      &:before {
        width: 43px;
        height: 29px;
        top: -8px;
        left: 16px;
        border-radius: 0 10px 30px 30px;
      }
    }
  }
}

.santa {
  $base: &;
  position: absolute;
  bottom: -30px;
  left: 100px;
  width: 125px;
  height: 107px;
  z-index: 10;
  -webkit-transform: scale(0.6) rotateY(180deg);
  transform: scale(0.6) rotateY(180deg);
  &__hat-part {
    position: absolute;
    top: 7px;
    left: 31px;
    width: 43px;
    height: 58px;
    border-radius: 50%;
    -webkit-transform: rotate(28deg);
    transform: rotate(28deg);
    background-color: $SANTA_CLOTHE;
    &:before,
    &:after {
      content: "";
      position: absolute;
      border-radius: 50%;
      height: 7px;
    }
    &:nth-of-type(1) {
      &:before {
        top: 9px;
        left: 45px;
        width: 7px;
        background-color: #fff;
      }
      &:after {
        top: 3px;
        left: 19px;
        width: 30px;
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg);
        background-color: $SANTA_CLOTHE;
      }
    }
    &:nth-of-type(2) {
      top: 18px;
      left: 31px;
      width: 44px;
      height: 34px;
      border-radius: 50%;
      -webkit-transform: rotate(12deg);
      transform: rotate(12deg);
      background-color: #fff;
    }
  }
  &__face {
    position: absolute;
    top: 25px;
    left: 37px;
    width: 31px;
    height: 17px;
    border-radius: 20px 20px 50% 50%;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    background-color: $SANTA_FACE_COLOR;
    z-index: 10;
  }
  &__beard-part {
    position: absolute;
    top: 8px;
    left: -14px;
    width: 15px;
    height: 17px;
    border-radius: 50%;
    background-color: $SANTA_BEARD_COLOR;
    &:before,
    &:after {
      content: "";
      position: absolute;
      height: 17px;
      background-color: $SANTA_BEARD_COLOR;
    }
    &:before {
      top: 12px;
      left: 1px;
      width: 15px;
      border-radius: 50%;
    }
    &:nth-of-type(2) {
      top: 16px;
      left: -8px;
      width: 26px;
      height: 30px;
      &:before {
        top: 16px;
        left: 13px;
        width: 19px;
      }
      &:after {
        top: 1px;
        left: 13px;
        width: 19px;
      }
    }
    &:nth-of-type(3) {
      top: 16px;
      left: 14px;
      width: 27px;
      height: 28px;
      &:before {
        top: -4px;
        left: 13px;
        width: 17px;
      }
    }
  }
  &__eyebrows {
    position: absolute;
    width: 22px;
    height: 10px;
    top: 0;
    left: 2px;
    &:before,
    &:after {
      width: 2px;
      height: 7px;
      border-radius: 50%;
      background-color: $SANTA_EYEBROWS_COLOR;
    }
    &:before {
      top: 0;
      left: 0;
      -webkit-transform: rotate(65deg);
      transform: rotate(65deg);
    }
    &:after {
      top: 1px;
      right: 0;
      -webkit-transform: rotate(-65deg);
      transform: rotate(-65deg);
    }
  }
  &__eye {
    position: absolute;
    top: 7px;
    left: 2px;
    width: 22px;
    height: 4px;
    &:before,
    &:after {
      width: 3px;
      height: 4px;
      border-radius: 50%;
      background-color: $BLACK_COLOR;
    }
    &:before {
      top: 0;
      left: 0;
    }
    &:after {
      top: 0;
      right: 0;
    }
  }
  &__nose {
    position: absolute;
    top: 10px;
    left: 6px;
    width: 12px;
    height: 9px;
    border-radius: 50%;
    z-index: 10;
    background-color: $SANTA_NOSE_COLOR;
  }
  &__cheek {
    position: absolute;
    top: 12px;
    left: 0;
    width: 25px;
    height: 10px;
    z-index: 10;
    &:before,
    &:after {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: $SANTA_CHEEK_COLOR;
    }
    &:before {
      top: 0;
      left: -5px;
    }
    &:after {
      top: 0;
      right: -6px;
    }
  }
  &__body {
    position: absolute;
    top: 57px;
    left: 22px;
    width: 55px;
    height: 45px;
    border-radius: 50%;
    background-color: $SANTA_CLOTHE;
    &:before {
      top: 20px;
      left: 0px;
      width: 55px;
      height: 5px;
      background-color: $BLACK_COLOR;
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }
    &:after {
      top: 18px;
      left: 15px;
      width: 7px;
      height: 5px;
      background-color: $BLACK_COLOR;
      border: 1px solid #fff;
      border-radius: 3px;
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }
  }
}

.lease {
  position: absolute;
  top: 25px;
  left: 105px;
  width: 30px;
  height: 30px;
  border: 15px solid green;
  border-radius: 50%;
  background-color: transparent;
  z-index: 10;
  &__ribbon {
    position: absolute;
    top: 0;
    left: calc(50% - 4px);
    width: 8px;
    height: 7px;
    border-radius: 8px;
    background-color: #d63527;
    &:before,
    &:after {
      top: -7px;
      border-left: 16px solid #d63527;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    &:before {
      left: -10px;
    }
    &:after {
      left: 2px;
    }
  }
  &__decoration {
    position: absolute;
    top: 0;
    left: 0;
    &-part {
      position: absolute;
      top: 0;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #fed429;
      &:before,
      &:after {
        top: 0;
        left: 0;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #c74734;
      }
      &:nth-of-type(1) {
        top: -11px;
        &:before {
          top: 12px;
          left: -11px;
          background-color: #c74734;
        }
        &:after {
          content: none;
        }
      }
      &:nth-of-type(2) {
        top: 20px;
        left: -10px;
        &:before {
          top: 12px;
          left: 12px;
        }
        &:after {
          top: 10px;
          left: 33px;
          background-color: #fed429;
        }
      }
      &:nth-of-type(3) {
        top: 1px;
        left: 31px;
        &:before {
          top: 16px;
          left: 5px;
        }
        &:after {
          top: -13px;
          left: -13px;
        }
      }
    }
  }
}

.present {
  position: absolute;
  bottom: 0;
  left: 110px;
  width: 30px;
  height: 25px;
  border-radius: 50% 50% 10px 10px;
  background: #fff;
  &:before {
    top: -9px;
    left: 6px;
    width: 0;
    height: 0;
    border-top: 20px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    -webkit-transform: rotate(-55deg);
    transform: rotate(-55deg);
  }
  &:after {
    top: 0px;
    left: 7px;
    width: 7px;
    height: 2px;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    background: $BLACK_COLOR;
  }
}

@-webkit-keyframes snowMove {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(170px);
    transform: translateY(170px);
  }
}

@keyframes snowMove {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(170px);
    transform: translateY(170px);
  }
}

@-webkit-keyframes contentMove {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

@keyframes contentMove {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

View Compiled

// （｀・ω・´）
// No images, just CSS.
// Chrome recommended.
// twitter.com/study_dedede

This Pen is owned by Deren on CodePen.

See more by @deren2525 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.