정보실

https://codepen.io/kbrtrm/pen/grgyJe

HTML :

<div class="container">
  <div class="sh sheet-1">
    <div class="face">
      <div class="eye left"></div>
      <div class="eye right"></div>
      <div class="mouth"></div>
    </div>
  </div>
  <div class="sh sheet-2"></div>
  <div class="sh sheet-3"></div>
  <div class="sh sheet-4"></div>
  <div class="sh sheet-5"></div>
  <div class="sh sheet-6"></div>
  <div class="sh sheet-7"></div>
  <div class="sh sheet-8"></div>
  <div class="sh sheet-9"></div>
  <div class="sh sheet-10"></div>
  <div class="sh sheet-11"></div>
  <div class="sh sheet-12"></div>
  <div class="sh sheet-13"></div>
  <div class="sh sheet-14"></div>
  <div class="sh sheet-15"></div>
</div>
<div class="rain-hold">
<div class="rain r1"></div>
    <div class="rain r2"></div>    
    <div class="rain r3"></div>
    <div class="rain r4"></div>
    <div class="rain r5"></div>
    <div class="rain r6"></div>
  </div>

CSS : 

.sh {
  background: #fff;
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
}

.container {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  height: 400px;
  z-index: 1;
  margin-top: 150px;
}

@keyframes updown {
  0% {
    margin-top: 0px;
  }
  33% {
    margin-top: 15px;
  }
  67% {
    margin-top: -15px;
  }
  100% {
    margin-top: 0px;
  }
}
.sheet-1 {
  right: 15px;
  top: 15px;
  z-index: -10;
  background: #FFC7C7;
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 0.125s;
}
.container:hover .sheet-1 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0s;
}
.container:hover .sheet-1 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-1 .mouth {
  height: 15px;
}

.sheet-2 {
  right: 30px;
  top: 30px;
  z-index: -20;
  background: #FFC7C7;
  display: block;
  width: 49px;
  height: 49px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 0.25s;
}
.container:hover .sheet-2 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.025s;
}
.container:hover .sheet-2 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-2 .mouth {
  height: 15px;
}

.sheet-3 {
  right: 45px;
  top: 45px;
  z-index: -30;
  background: #FFC7C7;
  display: block;
  width: 48px;
  height: 48px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 0.375s;
}
.container:hover .sheet-3 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.05s;
}
.container:hover .sheet-3 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-3 .mouth {
  height: 15px;
}

.sheet-4 {
  right: 60px;
  top: 60px;
  z-index: -40;
  background: #FFC7C7;
  display: block;
  width: 47px;
  height: 47px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 0.5s;
}
.container:hover .sheet-4 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.075s;
}
.container:hover .sheet-4 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-4 .mouth {
  height: 15px;
}

.sheet-5 {
  right: 75px;
  top: 75px;
  z-index: -50;
  background: #FFC7C7;
  display: block;
  width: 46px;
  height: 46px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 0.625s;
}
.container:hover .sheet-5 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.1s;
}
.container:hover .sheet-5 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-5 .mouth {
  height: 15px;
}

.sheet-6 {
  right: 90px;
  top: 90px;
  z-index: -60;
  background: #FFC7C7;
  display: block;
  width: 45px;
  height: 45px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 0.75s;
}
.container:hover .sheet-6 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.125s;
}
.container:hover .sheet-6 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-6 .mouth {
  height: 15px;
}

.sheet-7 {
  right: 105px;
  top: 105px;
  z-index: -70;
  background: #FFC7C7;
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 0.875s;
}
.container:hover .sheet-7 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.15s;
}
.container:hover .sheet-7 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-7 .mouth {
  height: 15px;
}

.sheet-8 {
  right: 120px;
  top: 120px;
  z-index: -80;
  background: #FFC7C7;
  display: block;
  width: 43px;
  height: 43px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 1s;
}
.container:hover .sheet-8 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.175s;
}
.container:hover .sheet-8 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-8 .mouth {
  height: 15px;
}

.sheet-9 {
  right: 135px;
  top: 135px;
  z-index: -90;
  background: #FFC7C7;
  display: block;
  width: 42px;
  height: 42px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 1.125s;
}
.container:hover .sheet-9 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.2s;
}
.container:hover .sheet-9 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-9 .mouth {
  height: 15px;
}

.sheet-10 {
  right: 150px;
  top: 150px;
  z-index: -100;
  background: #FFC7C7;
  display: block;
  width: 41px;
  height: 41px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 1.25s;
}
.container:hover .sheet-10 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.225s;
}
.container:hover .sheet-10 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-10 .mouth {
  height: 15px;
}

.sheet-11 {
  right: 165px;
  top: 165px;
  z-index: -110;
  background: #FFC7C7;
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 1.375s;
}
.container:hover .sheet-11 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.25s;
}
.container:hover .sheet-11 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-11 .mouth {
  height: 15px;
}

.sheet-12 {
  right: 180px;
  top: 180px;
  z-index: -120;
  background: #FFC7C7;
  display: block;
  width: 39px;
  height: 39px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 1.5s;
}
.container:hover .sheet-12 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.275s;
}
.container:hover .sheet-12 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-12 .mouth {
  height: 15px;
}

.sheet-13 {
  right: 195px;
  top: 195px;
  z-index: -130;
  background: #FFC7C7;
  display: block;
  width: 38px;
  height: 38px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 1.625s;
}
.container:hover .sheet-13 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.3s;
}
.container:hover .sheet-13 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-13 .mouth {
  height: 15px;
}

.sheet-14 {
  right: 210px;
  top: 210px;
  z-index: -140;
  background: #FFC7C7;
  display: block;
  width: 37px;
  height: 37px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 1.75s;
}
.container:hover .sheet-14 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.325s;
}
.container:hover .sheet-14 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-14 .mouth {
  height: 15px;
}

.sheet-15 {
  right: 225px;
  top: 225px;
  z-index: -150;
  background: #FFC7C7;
  display: block;
  width: 36px;
  height: 36px;
  position: absolute;
  transition: margin-top .25s;
  transition-delay: 1.875s;
}
.container:hover .sheet-15 {
  animation: updown .5s ease-in-out infinite;
  animation-delay: 0.35s;
}
.container:hover .sheet-15 .eye {
  height: 7px;
  width: 7px;
}
.container:hover .sheet-15 .mouth {
  height: 15px;
}

.face {
  position: relative;
}
.face .eye {
  height: 1px;
  width: 7px;
  background: #000;
  border-radius: 50%;
  transform: rotate(-12deg);
}
.face .eye.left {
  position: absolute;
  left: 15px;
  top: 15px;
}
.face .eye.right {
  position: absolute;
  right: 5px;
  top: 10px;
}
.face .mouth {
  height: 1px;
  width: 30px;
  border-radius: 90px 90px 0 0;
  -moz-border-radius: 90px 90px 0 0;
  -webkit-border-radius: 0px 0px 90px 90px;
  background: #000;
  transform: rotate(-12deg);
  top: 27px;
  left: 16px;
  position: absolute;
}

body {
  overflow: hidden;
  /* lightning animation */
  -webkit-animation: flash 8s linear infinite;
  -moz-animation: flash linear 8s infinite;
  -o-animation: flash linear 8s infinite;
  animation: flash linear 8s infinite;
  background: #000;
}

.rain-hold {
  transform: rotate(55deg);
}

.rain {
  position: absolute;
  width: 3004px;
  /* (2560 + 1244) */
  height: 4800px;
  top: -5800px;
  left: -1844px;
}

body:hover {
  /* Two waves of nearby rain */
  /* Two waves of mid-distant rain */
  /* Two waves of distant rain */
}
body:hover .r1 {
  -webkit-animation: fall 2.2s infinite linear;
  -moz-animation: fall 2.2s infinite linear;
  -o-animation: fall 2.2s infinite linear;
  animation: fall 2.2s infinite linear;
  background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-near.png) repeat;
}
body:hover .r2 {
  -webkit-animation: fall 2.2s 1s infinite linear;
  -moz-animation: fall 2.2s 1s infinite linear;
  -o-animation: fall 2.2s 1s infinite linear;
  animation: fall 2.2s 1s infinite linear;
  background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-near.png) repeat;
}
body:hover .r3 {
  -webkit-animation: fall 4s infinite linear;
  -moz-animation: fall 4s infinite linear;
  -o-animation: fall 4s infinite linear;
  animation: fall 4s infinite linear;
  background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-mid.png) repeat;
}
body:hover .r4 {
  -webkit-animation: fall 4.5s 3.2s infinite linear;
  -moz-animation: fall 4.5s 3.2s infinite linear;
  -o-animation: fall 4.5s 3.2s infinite linear;
  animation: fall 4.5s 3.2s infinite linear;
  background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-mid.png) repeat;
}
body:hover .r5 {
  -webkit-animation: fall 6s infinite linear;
  -moz-animation: fall 6s infinite linear;
  -o-animation: fall 6s infinite linear;
  animation: fall 6s infinite linear;
  background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-distant.png) repeat;
}
body:hover .r6 {
  -webkit-animation: fall 6s 4s infinite linear;
  -moz-animation: fall 6s 4s infinite linear;
  -o-animation: fall 6s 4s infinite linear;
  animation: fall 6s 4s infinite linear;
  background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-distant.png) repeat;
}

/**
 * Falling rain animation
 * Assumes a max screen resolution of 2560px x 1600px.
 * Rain falls the size of the div + the estimated 
 * height of the screen (1600 max). 4800 + 1600 = 6400.
 *
 * Making the rain fall straight down is easier for ensuring there is always
 * rain on the screen. However I can preserve the angle of falling rain with
 * a translateY of 1244px.
 */
@-webkit-keyframes fall {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(1244px, 6400px);
    -moz-transform: translate(1244px, 6400px);
    -o-transform: translate(1244px, 6400px);
    -ms-transform: translate(1244px, 6400px);
    transform: translate(1244px, 6400px);
  }
}
@-moz-keyframes fall {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(1244px, 6400px);
    -moz-transform: translate(1244px, 6400px);
    -o-transform: translate(1244px, 6400px);
    -ms-transform: translate(1244px, 6400px);
    transform: translate(1244px, 6400px);
  }
}
@-o-keyframes fall {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(1244px, 6400px);
    -moz-transform: translate(1244px, 6400px);
    -o-transform: translate(1244px, 6400px);
    -ms-transform: translate(1244px, 6400px);
    transform: translate(1244px, 6400px);
  }
}
@keyframes fall {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(1244px, 6400px);
    -moz-transform: translate(1244px, 6400px);
    -o-transform: translate(1244px, 6400px);
    -ms-transform: translate(1244px, 6400px);
    transform: translate(1244px, 6400px);
  }
}