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 {
  awidth: 100%;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  font-size: 1.5em;
  overflow: hidden;
}

#nevado {      
   awidth: 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-awidth: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