Mặc dù đặt tuyết hoạt hình trên một trang, cho dù từ chúng tôi hay từ khách hàng, nghe có vẻ giống như một phương pháp thiết kế cổ xưa hơn bất cứ điều gì khác, sự thật là hoạt hình mà chúng tôi giới thiệu trong dịp này là biển thanh lịch. Ngoài ra, bạn không cần JavaScript, nó đơn giản CSS3.
Điều đầu tiên là hãy xem các hình ảnh động.
Trông khá ổn, phải không? Để áp dụng vào thực tế, chúng tôi chỉ cần tạo ba hình ảnh với các chấm trắng và tạo hoạt ảnh cho chúng bằng thuộc tính @keyframes của CSS3 như sau:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Thêm cái khác tiền tố cho các trình duyệt khác nhau, sau đó thiết lập cho cơ thể của chúng ta:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Đồng thời thêm các tiền tố cần thiết. Bạn có thể tìm thấy toàn bộ quy trình với lời giải thích chi tiết, với sự cho phép của Joshua Johnson trên blog của anh ấy.
Thêm thông tin - CSS3 Gradient Generator, CSS3 Gradient Generator
Nguồn - Thiết kế Shack