눈 내리는 효과.. (Only CSS)

 

 

   

갯수 조정 가능하며, 눈송이는 텍스트나 이미지로 대체할 수 있음.

 

Demo & Code

 

 

[Demo] Snowing effect - Only CSS

 

 

<!-- HTML -->

<div id="outer">
  <div class="snowflakes" aria-hidden="true">
    <div class="snowflake" style="font-size: 12px">❉</div>
    <div class="snowflake" style="font-size: 26px">❆</div>
    <div class="snowflake" style="font-size: 28px">달리는 기분~</div>
    <div class="snowflake" style="font-size: 16px">❆</div>
    <div class="snowflake" style="font-size: 20px">❉</div>
    <div class="snowflake" style="font-size: 28px">상쾌도 하다아~~~~</div>
    <div class="snowflake" style="font-size: 20px">❆</div>	
    <div class="snowflake" style="font-size: 22px">❆</div>
    <div class="snowflake" style="font-size: 28px">썰매를 타고~</div>
    <div class="snowflake" style="font-size: 10px">❆</div>
    <div class="snowflake" style="font-size: 28px">흰눈 사이로~</div>
    <div class="snowflake" style="font-size: 28px">❆</div>
    <div class="snowflake" style="font-size: 24px">❆</div>
    <div class="snowflake" style="font-size: 22px">❆</div>
    <div class="snowflake" style="font-size: 20px">❆</div>
    <div class="snowflake" style="font-size: 16px">❉</div>
    <div class="snowflake" style="font-size: 18px">❆</div>
    <div class="snowflake" style="font-size: 26px">❉</div>
    <div class="snowflake" style="font-size: 28px">❆</div>
    <div class="snowflake" style="font-size: 12px">❆</div>
  </div>
</div>

 

 

 

 

/* CSS */

#outer { width:100%; height:100%; position:absolute; top:0px; left:50%;
  transform:translateX(-50%); border:0px solid #fff; overflow:hidden }

.snowflake { height:100%; color: rgb(143 201 255 / 76%); font-size: 1em;
  font-family: Arial; text-shadow: 0 0 1px rgba(0,0,0,0.1); }

@-webkit-keyframes snowflakes-fall {
    0% { top:-10% } 100% { top:800px }
}
@-webkit-keyframes snowflakes-shake {
    0%, 100% { -webkit-transform:translateX(0); transform:translateX(0) }
    50% { -webkit-transform:translateX(80px); transform:translateX(80px) }
}

@keyframes snowflakes-fall {
    0% { top:-10% } 100% { top:800px }
}@keyframes snowflakes-shake {
    0%, 100% { transform:translateX(0) }
    50% { transform:translateX(80px) }
}

.snowflake{
    position:absolute; top:-10%; z-index:9999; -webkit-user-select:none;
    -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:default;
    -webkit-animation-name:snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration:10s, 3s; -webkit-animation-timing-function:linear,
    ease-in-out; -webkit-animation-iteration-count:infinite, infinite;
    -webkit-animation-play-state:running, running;animation-name:snowflakes-fall,
    snowflakes-shake; animation-duration:10s, 3s; animation-timing-function:linear,
    ease-in-out; animation-iteration-count:infinite, infinite;
    animation-play-state:running, running
}

.snowflake:nth-of-type(0) { left:1%;-webkit-animation-delay:0s, 0s; animation-delay:0s, 0s }
.snowflake:nth-of-type(1) { left:5%;-webkit-animation-delay:1s, 1s; animation-delay:1s, 1s }
.snowflake:nth-of-type(2) { left:10%;-webkit-animation-delay:6s, .5s; animation-delay:6s, .5s }
.snowflake:nth-of-type(3) { left:15%;-webkit-animation-delay:4s, 2s; animation-delay:4s, 2s }
.snowflake:nth-of-type(4) { left:20%;-webkit-animation-delay:2s, 2s; animation-delay:2s, 2s }
.snowflake:nth-of-type(5) { left:25%;-webkit-animation-delay:8s, 3s; animation-delay:8s, 3s }
.snowflake:nth-of-type(6) { left:30%;-webkit-animation-delay:6s, 2s; animation-delay:6s, 2s }
.snowflake:nth-of-type(7) { left:35%;-webkit-animation-delay:9.5s, 1s; animation-delay:9.5s, 1s }
.snowflake:nth-of-type(8) { left:40%;-webkit-animation-delay:1s,0s; animation-delay:1s, 0s }
.snowflake:nth-of-type(9) { left:45%;-webkit-animation-delay:3s, 1.5s; animation-delay:3s, 1.5s }
.snowflake:nth-of-type(10) { left:50%;-webkit-animation-delay:0s, 0s; animation-delay:0s, 0s }
.snowflake:nth-of-type(11) { left:55%;-webkit-animation-delay:1s, 1s; animation-delay:1s, 1s }
.snowflake:nth-of-type(12) { left:60%;-webkit-animation-delay:6s, .5s; animation-delay:6s, .5s }
.snowflake:nth-of-type(13) { left:65%;-webkit-animation-delay:4s, 2s; animation-delay:4s, 2s }
.snowflake:nth-of-type(14) { left:70%;-webkit-animation-delay:2s, 2s; animation-delay:2s, 2s }
.snowflake:nth-of-type(15) { left:75%;-webkit-animation-delay:8s, 3s; animation-delay:8s, 3s }
.snowflake:nth-of-type(16) { left:80%;-webkit-animation-delay:6s, 2s; animation-delay:6s, 2s }
.snowflake:nth-of-type(17) { left:85%;-webkit-animation-delay:2.5s, 1s; animation-delay:2.5s, 1s }
.snowflake:nth-of-type(18) { left:90%;-webkit-animation-delay:1s, 0s; animation-delay:1s, 0s }
.snowflake:nth-of-type(19) { left:95%;-webkit-animation-delay:3s, 1.5s; animation-delay:3s, 1.5s }