Snow drop animation Css3

Hi các bạn, sắp tới Noel rùi, mình xin chia sẻ 1 tip nhỏ về animation css với hiệu ứng bông tuyết rơi để hòa vào với không khí chung.

Let's start!

Images:

Chọn một background phù hợp vs bối cảnh nhé: Mình chọn cái này :

Tiếp theo sẽ chọn một số icon hình bông tuyết, mình sử dụng luôn HTML Code:

1. ❄
2. ❉
3. ❋
4. ❅

Đại khái các hình ảnh mình cần để sử dụng là như vậy.

Styles

Bây h đến phần style: Style chung:

* {margin:0; padding:0;}
html, body {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  font-size: 1.5em;
  overflow: hidden;
}

#nevado {      
   width: 768px;
   min-height: 100%!important;
   height: 800px;     
   position: relative;
   margin: 0 auto;
} 

#fondo-imag img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Style cho các bông tuyết:

#nevar div {
    position: absolute;
    top: -10px;
    animation-name: nieve, copos;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-in;
}

.copos {
   color: rgba(255,255,255,.7);
   font-size: 1em;
   position: absolute;
}

Vì các bông tuyết sẽ drop từ trên xuống nên ban đâu sẽ không thấy --> mình để vị trí tuyệt đối cho nó và sẽ nằm lên phia trên của website để ban đầu sẽ không nhìn thấy nó --> top : -10px; Mình sẽ chọn 2 animation name là "nieve" và "copos" -> chi tiết mình sẽ nói ở dưới. Thuộc tính iteration-count sẽ chọn là infinite để animation này nó chạy mãi mãi

Tiếp theo để cho sinh động thì mỗi bông tuyết sẽ có kích thước khác nhau, và tốc độ rơi cũng khác nhau nữa Style khác nhau: ở đây mình style 7 loại khác nhau:

.copos.c1 {
   font-size: 1.7em;
   left: 60px;
   animation-duration: 5s;
   color:rgba(160,240,255, .6);
}
.copos.c2 {
   font-size: 1.2em;
   left: 140px;
   animation-duration: 8s;  
}
.copos.c3 {
   font-size: 1.1em;
   left: 220px;
   animation-duration: 9s; 
}
.copos.c4 {
   font-size: 1.5em;
   left: 300px;
   animation-duration: 6s;
   color:rgba(48,176,255, .4); 
}
.copos.c5 {
   font-size: 1em;
   left: 380px;
   animation-duration: 7s;
}
.copos.c6 {
   font-size: .9em;
   left: 470px;
   animation-duration: 10s;  
} 
.copos.c7 {
   font-size: 2em;
   left: 570px;
   animation-duration: 10s;
   color:rgba(0,240,255, .4);
} 
.copos.c8 {
   font-size: 1em;
   left: 670px;
   animation-duration: 12s;
}
.copos span {
    display: block;
    top: -50px;
    font-size: 1.3em;
    opacity: .8;
    white-space: pre;
    font-family: monospace;
}

Animations

Tiếp theo là đến animation mình nói phái trên

nieve Nghĩa là mỗi một bông tuyết style phía trên sẽ đi kèm vs animation này: Từ thời điểm bắt đầu, vị trí top của nó sẽ là -100px, cho tới thời điểm cuối cùng, vị trí của nó sẽ là top: 1200px, tương ứng vs mỗi class .c1 -> .c8 sẽ là thời gian cho animation, mỗi một class sẽ có một tốc độ rơi khác nhau, thời gian animation khác nhau

@keyframes nieve {
   from {top: -100px;}
   to {top: 1200px;}
}      

copos Animation này thì định nghĩa cho cái bông tuyết đó tự quay vòng tròn 2 vòng, cái này tùy chọn, bạn có thể bỏ đi để nhìn animation nhẹ nhàng hơn hoặc cho nó vào để nhìn chóng mặt hơn. Tùy nhé.

@-keyframes copos {
    0% { transform: rotate(0deg) translate(0px, 0px);}
    100% { transform: rotate(720deg) translate(0px, 100px);}
}