Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Hiệu ứng mây trôi trong css
Hiệu ứng mây trôi trong css
Nguyễn Trung Hiếu
Share Code Web Company 2012

Hiệu ứng mây trôi trong css

Nay mình sẽ viết 1 bài về hiệu ứng mây trôi trong css. Rất hay và thú vị đó, các bạn cùng tham khảo nhé

Hiệu ứng mây trôi là như thế nào? Nói thì hơi quá nhưng sau bài này các bạn sẽ làm được hình bầu trời trong đó có các đám mây trôi tự nhiên, cộng thêm hiệu ứng chuyển từ ngày sang đêm và ban đêm sẽ có hình ảnh mặt trăng đi lên. OK. Thú vị rồi phải không. Cùng làm nhé.
I. HTML

II. CSS
Ở đây ta dùng 4 hình ảnh xen kẽ nhau, đó là mặt trăng và các đám mây. Các bạn có thể download hình ảnh dưới đây sau đó cho vào thư mục images nhé.

Tiếp theo là các đoạn css cơ bản

Các bạn chú ý đoạn css ở trên, đó là chỗ -webkit-animation, -moz-animation, -o-animation ở các class. Những thuộc tính này dùng các “hàm” (có thể gọi là như vậy cho dễ hiểu) để sau đó dưới đây, chúng ta khai báo cho các “hàm” này bằng css3 như sau:
1. Nền bầu trời: sky_background

Ở đây nền bầu trời được thay đổi bởi 3 khung, tương ứng là 0%, 50%, và 100%. Với mỗi khung được chuyển động thì sẽ có màu tương ứng.
2. Hình ảnh mặt trăng: moon

Đối với mặt trăng, chúng ta chỉ cho phép nó xuất hiện vào ban đêm, và di chuyển từ dưới lên trên mà thôi.
3. Hiệu ứng mây trôi

Đối với hiệu ứng mây trôi, chúng ta sẽ cho chúng trôi nhẹ nhàng từ trái qua phải.
Và cuối cùng, để nó có thể chạy được trên firefox thì các bạn cũng làm tương tự vậy chỉ thay @-webkit-keyframes bằng @-moz-keyframes để firefox có thể hiểu được.

Vậy là xong. Thành quả của các bạn là đây. Rất tuyệt phải không nào.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.777 hits
%d bloggers like this: