<div id="container">
  <div class="block">
    <div class="snow"></div>
    <div class="snow-person">
      <div class="eyes">
      </div>
      <div class="carrot">
      </div>
      <div class="arm-right">
      </div>
      <div class="arm-left">
      </div>
      <div class="buttons">
      </div>
    </div>
    <h2>seasons greetings</h2>
    <h3 class="sig">from Chuky<h3/>
    <span><span/>
      
    </block>
</div>
@import url('https://fonts.googleapis.com/css2?family=Agu+Display&family=Oxanium:wght@200..800&family=Rubik+Mono+One&display=swap');

@property --start-col-1 {
  syntax:'<color>';
  initial-value: #9198e5;
  inherits: false;
}
@property --start-col-2 {
  syntax:'<color>';
  initial-value: #e66465;
  inherits: false;
}

@property --end-col-1 {
  syntax:'<color>';
  initial-value: #304529;
  inherits: false;
}
@property --end-col-2 {
  syntax:'<color>';
  initial-value: #4a6741;
  inherits: false;
}

$font: "Agu Display", serif;
$primary:#FF0072;
$blue: radial-gradient(var(--start-col-1), var(--start-col-2));
$blue-two: radial-gradient(#9198e5, #000);
$yellow: linear-gradient(var(--end-col-1), var(--end-col-2));
$red:#ff3628;
$star: radial-gradient(rgb(208,154,0) 35%, rgb(243,255,0) 100%);
$d: 70;      // density
$w: 600;     // grid size
$s: 3s;       // speed
$bs: 8px;

// Generate the snow image using radial gradients
$grad: ();
@for $i from 0 to $d {
  $v: random(4) + 2;
  $a: random(5) * .1 + .5;
  $grad: $grad, radial-gradient(
      $v+px $v+px at
      (random($w - $v * 2) + $v)+px
      (random($w - $v * 2) + $v)+px, 
      rgba(255,255,255,$a) 50%,
      rgba(0,0,0,0)
  ) !global;
}

.snow, .snow:before, .snow:after {
  position: absolute;
  top: -$w + px;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: $grad;
  background-size: $w + px $w + px;
  animation: snow $s linear infinite;
  content: "";
}

.snow:after {
  margin-left: -$w/3 + px;
  opacity: .4; 
  animation-duration: $s*2;
  animation-direction: reverse;
  filter: blur(3px);
}

.snow:before {
  animation-duration: $s*3;
  animation-direction: reverse;
  margin-left: -$w/2 + px;
  opacity: .65;
  filter: blur(1.5px);
}

@keyframes snow {
  to {
    transform: translateY($w + px);
  }
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body{
    height:100%;
    width: 100%;
}
body {
  padding:0px;
  margin:0;
  font-family:$font;
  background: #24252A;
  -webkit-font-smoothing: antialiased;
}

#container{
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:center;
}

.block{
  width:400px;
  height:230px;
  overflow:hidden;
  position:relative;
  cursor:cell;
  border: 0.5px dashed white;
  &:after{
    transition: 250ms all ease-in-out;
    width: 250px;
    height: 250px;
    position: absolute;
    right: -100px;
    bottom: -100px;
    content:'';
    display:inline-block;
    background:$yellow;
   -webkit-clip-path:
     xpolygon(50% 0%, 0% 100%, 100% 100%);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
  &:before {
    transition:250ms all ease;
    background:$blue;
    content:'';
    width:100%;
    height:100%;
   position:absolute;
  }
  .snow-person{
  position:absolute;
  bottom:-10px;
  left:25px;
  width:60px;
  height:60px;
  background-color: #bbb;
  border-radius: 50%;
  display: flex;
  z-index:99999;
   &:before {
  content:'';
  position:absolute;
  bottom:40px;
  left:10px;
  border-radius:50%;
  width:40px;
  height:40px;
  background-color: #bbb;
  display:inline-block;
  border-radius: 50%;
  z-index:99999;
    }
   &:after {
  content:''; //integral in allowing appearance before and after
  position:absolute;
  bottom:70px;
  left:15px;
  border-radius:50%;
  width:30px;
  height:30px;
  background-color: #bbb;
  display:inline-block;
  border-radius: 50%;
  z-index:99999;
    }
    .buttons{
      position:absolute;
      color:black;
      background-color: black;
      z-index:999999;
      top: -10px;
      left: 30px;
      height:$bs;
      width:$bs;
      border-radius:50%;
      &:before {
      content:"";
      position:absolute;
      color:black;
      background-color: black;
      z-index:999999;
      top:12px;
      left:0px;
      height:$bs;
      width:$bs;
      border-radius:50%;
      }
      &:after{
      content:"";
      position:absolute;
      color:black;
      background-color: black;
      z-index:999999;
      top:24px;
      left:0px;
      height:$bs;
      width:$bs;
      border-radius:50%;  
      }
    }
    .carrot{
    position:absolute;
    z-index: 999999;
    top: -30px;
    left: 37px;
    width: 0; 
    height: 0; 
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent; 
    border-left:20px solid orange; 
    }
    .eyes{
      position:absolute;
      z-index:999999;
      top: -37px;
      left: 23px;
      width:10px;
      height:10px;
      border-radius: 50%;
      background-color:blue;
      &:before{
        content:"";
        z-index:-999;
        position:absolute;
        top: 0;
        left: 16px;
        width: 6px;
        height: 10px;
        border-radius: 50%;
        background-color:blue;
      }
    }
    .arm-right{
      position:absolute;
      left: 43px;
      top: -15px;
      z-index:999999;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-left: 40px solid brown;
      transform: rotate(-10deg);
    }
    .arm-left {
      position:absolute;
      left: -10px;
      top: -15px;
      z-index:999999;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-right: 30px solid brown;
      transform: rotate(10deg);
  }
  }
  .sig{
    display:block;
    transition: 2s ease-in-out;
    position: absolute;
    content:attr(data-text);
    // justify-content:right;
    // align-items:bottom;
    height:100%;
    width:100%;
    bottom:-220px;
    right:-350px;
    z-index: 99999;
    color: white;
    font-size:8px;
    opacity:0;
    p{
      font-size:8px;
    }
  }
  span{
    display:flex;
    position: absolute;
    width: 44px;
    height: 44px;
    top:-300px;
    right:-100px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: $star;
  }
  h2 {
    display:flex;
    align-items:center;
    font-size:25px;
    justify-content:center;
    content:attr(data-text);
    color:#FFF;
    position:absolute;
    left:0;
    right:0;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    font-family:$font;
    font-weight:500;
    margin:0;
    z-index:99;
    opacity: none;
    &:hover{
      transition: 1s color ease-in-out;
      color: yellow;
      opacity: 1;
    }
  }
   &:hover {
    &:before {
  
 transition: all 1s ease-in-out;  transform:scale(0.8);
      background: $blue-two;
    }
    &:after {
      right:-40px;
      bottom:-70px;
    }
   span{
   transition: 500ms all ease;
   top:30px;
   right: 63px;
   z-index:9999;
    }
   body{
      background: #fff;
     }
     .sig{
       opacity:1;
     }
  }
  }
View Compiled
//inspired by kitsune
//https://codepen.io/kitsune/pen/ZKjQOm

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.