+1

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:

Đạ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);}
}


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.