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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>CSS3 Cloud Animations</title> </head> <body> <div class="sky"> <div class="moon"></div> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div> </div> </body> </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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
html,body { margin:0; height:100% } .sky { height:480px; background:#007fd5; position:relative; overflow:hidden; -webkit-animation:sky_background 50s ease-out infinite; -moz-animation:sky_background 50s ease-out infinite; -o-animation:sky_background 50s ease-out infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0) } .moon { background:url("images/moon.png"); position:absolute; left:0; height:100%; width:300%; -webkit-animation:moon 50s linear infinite; -moz-animation:moon 50s linear infinite; -o-animation:moon 50s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0) } .clouds_one { background:url("images/cloud_one.png"); position:absolute; left:0; top:0; height:100%; width:300%; -webkit-animation:cloud_one 50s linear infinite; -moz-animation:cloud_one 50s linear infinite; -o-animation:cloud_one 50s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0) } .clouds_two { background:url("images/cloud_two.png"); position:absolute; left:0; top:0; height:100%; width:300%; -webkit-animation:cloud_two 75s linear infinite; -moz-animation:cloud_two 75s linear infinite; -o-animation:cloud_two 75s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0) } .clouds_three { background:url("images/cloud_three.png"); position:absolute; left:0; top:0; height:100%; width:300%; -webkit-animation:cloud_three 100s linear infinite; -moz-animation:cloud_three 100s linear infinite; -o-animation:cloud_three 100s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0) } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@-webkit-keyframes sky_background { 0% { background:#007fd5; color:#007fd5 } 50% { background:#000; color:#a3d9ff } 100% { background:#007fd5; color:#007fd5 } } |
Ở đâ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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@-webkit-keyframes moon { 0% { opacity: 0; left:-200% -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left:0% bottom:250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom:500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } |
Đố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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@-webkit-keyframes cloud_one { 0% { left:0 } 100% { left:-200% } } @-webkit-keyframes cloud_two { 0% { left:0 } 100% { left:-200% } } @-webkit-keyframes cloud_three { 0% { left:0 } 100% { left:-200% } } |
Đố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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
@-moz-keyframes sky_background { 0% { background:#007fd5; color:#007fd5 } 50% { background:#000; color:#a3d9ff } 100% { background:#007fd5; color:#007fd5 } } @-moz-keyframes moon { 0% { opacity: 0; left:-200% -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left:0% bottom:250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom:500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-moz-keyframes cloud_one { 0% { left:0 } 100% { left:-200% } } @-moz-keyframes cloud_two { 0% { left:0 } 100% { left:-200% } } @-moz-keyframes cloud_three { 0% { left:0 } 100% { left:-200% } |
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.
