Hướng dẫn hiệu ứng loading python
Hiệu ứng loading thú ví này thích hợp cho các website giải trí, không sử dụng JavaScript và tương thích với tất cả các trình duyệt phổ biến hiện nay. Đầu tiên là phần code cho file index.html: Phần code cho file style.css: @import "compass/css3"; $speed: 2.5s; * { margin: 0px; padding: 0px; border: 0px; } html, body { min-height: 100%; } body { background: radial-gradient(#eee,#444); } .loader { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 175px; height: 100px; span { display: block; background: #ccc; width: 7px; height: 10%; border-radius: 14px; margin-right: 5px; float: left; margin-top: 25%; &:last-child { margin-right: 0px; } &:nth-child(1) { animation: load $speed 1.4s infinite linear; } &:nth-child(2) { animation: load $speed 1.2s infinite linear; } &:nth-child(3) { animation: load $speed 1s infinite linear; } &:nth-child(4) { animation: load $speed 0.8s infinite linear; } &:nth-child(5) { animation: load $speed 0.6s infinite linear; } &:nth-child(6) { animation: load $speed 0.4s infinite linear; } &:nth-child(7) { animation: load $speed 0.2s infinite linear; } &:nth-child(8) { animation: load $speed 0s infinite linear; } &:nth-child(9) { animation: load $speed 0.2s infinite linear; } &:nth-child(10) { animation: load $speed 0.4s infinite linear; } &:nth-child(11) { animation: load $speed 0.6s infinite linear; } &:nth-child(12) { animation: load $speed 0.8s infinite linear; } &:nth-child(13) { animation: load $speed 1s infinite linear; } &:nth-child(14) { animation: load $speed 1.2s infinite linear; } &:nth-child(15) { animation: load $speed 1.4s infinite linear; } } } @keyframes load { 0% { background: #ccc; margin-top: 25%; height: 10%; } 50% { background: #444; height: 100%; margin-top: 0%; } 100% { background: #ccc; height: 10%; margin-top: 25%; } } Lưu ý: Các bạn cần thêm phần Header trong file html để khai báo đường dẫn cho file CSS. Có rất nhiều cách trang trí để blog/website trở nên đẹp hơn. Hôm nay, Code Pro sẽ chia sẻ cho các bạn một đoạn code với hiệu ứng loading chuyển động tuyệt đẹp. |