Hôm nay tôi sẽ hướng dẫn bạn tạo hiệu ứng tuyết rơi cho website với CSS và CSS3. Đây là một hiệu ứng đẹp, phù hợp cho những ngày giáng sinh sắp đến. Trong hiệu ứng này, bạn sẽ nhìn thấy những bông tuyết rơi trên toàn bộ trang web của bạn với hiệu ứng gió nhẹ theo thời gian.

Không cần sử dụng đến Javascript, tất cả chỉ là HTML, CSS và CSS3. Tôi sẽ show cho bạn code và demo ở cuối bài viết này !

HTML

Tôi sử dụng một vài kí tự giống như bông tuyết để chèn vào HTML, bạn cũng có thể sử dụng Font Awesome hoặc bất kì một loại icon nào bạn thích. Copy đoạn HTML này  vào trang web của bạn:

CSS Style

Tôi sử dụng những bông tuyết này có font-size 1em và có màu trắng.

Tiếp theo chúng ta tạo ra 2 animation sử dụng @keyframes. Đầu tiên là hiệu ứng tuyết rơi, thứ hai là hiệu ứng bông tuyết rung lắc và dịch rời. Tất cả được thêm vào trong -webkit-animation-name trong class snowflake.

Bây giờ chúng ta style cho bông tuyết bằng cách sử dụng gọi những keyframes mà chúng ta khai báo bên trên, set tên animation, thời gian, kiểu animation và số lần lặp cho nó.

Vì chúng ta sử dụng 10 bông tuyết trong HTML cho nên chúng ta cần set trạng thái cho từng bông một. Xem đoạn code bên dưới

See the Pen Snow Christmas Effect by huy kon (@huykon225) on CodePen.26877

Bài viết này hi vọng giúp cho website của bạn sẽ đẹp hơn trong mùa giáng sinh năm nay !

ĐỂ LẠI BÌNH LUẬN