剛剛本來是要跟梅干 A 幾張新圖片來寫範例使用的，他就很大方的給我 Flickr 的相簿讓我自己選。選著選著...咦~Flickr 的載入動畫還蠻有趣的耶，那...就讓我手癢想來試看看。
這兩顆小球會一直移動交換位置，同時階層也會改變。至於怎麼做呢...就讓我們看下去...
檢視原始碼 HTML
1 2 3 | <body> <div class="loading"></div> </body> |
順便裝飾一下：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 | .loading { position: relative; width: 60px; height: 30px; background: #3d3f3c; border-radius: 15px; margin: 50px auto; } |
這邊一樣是只有個 div 區塊：
而那兩顆小球我們只要使用 ::after 及 ::before 擬元素(Pseudo-elements)：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 | .loading::after { content: ""; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #ff0084; position: absolute; left: 10px; top: 5px; } |
先加了一個粉紅色的球~
再補上藍色的球：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 | .loading::before { content: ""; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #0063dc; position: absolute; left: 30px; top: 5px; } |
感覺有點樣子出現了厚...也有點像豬鼻子XD
現在缺少的就是讓它們可以移動交換位置就可以了。先寫左邊的粉紅色球的動畫效果：
檢視原始碼 CSS
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 | @-webkit-keyframes flickr-pink { 0% { -webkit-transform: translateX(0px); z-index: 2; } 50% { -webkit-transform: translateX(20px); z-index: 2; } 60% { z-index: 1; } 100% { -webkit-transform: translateX(0px); z-index: 1; } } @-moz-keyframes flickr-pink { 0% { -moz-transform: translateX(0px); z-index: 2; } 50% { -moz-transform: translateX(20px); z-index: 2; } 60% { z-index: 1; } 100% { -moz-transform: translateX(0px); z-index: 1; } } @-o-keyframes flickr-pink { 0% { -o-transform: translateX(0px); z-index: 2; } 50% { -o-transform: translateX(20px); z-index: 2; } 60% { z-index: 1; } 100% { -o-transform: translateX(0px); z-index: 1; } } @keyframes flickr-pink { 0% { transform: translateX(0px); z-index: 2; } 50% { transform: translateX(20px); z-index: 2; } 60% { z-index: 1; } 100% { transform: translateX(0px); z-index: 1; } } |
這邊只是透過 transform 的 translateX(x) 來改變球的水平位置，然後 animation-name 是 flickr-pink。
檢視原始碼 CSS
1 2 3 4 5 6 7 | .loading::after { -webkit-animation: flickr-pink 1s infinite linear; -moz-animation: flickr-pink 1s infinite linear; -ms-animation: flickr-pink 1s infinite linear; -o-animation: flickr-pink 1s infinite linear; animation: flickr-pink 1s infinite linear; } |
指定 ::after 擬元素執行該動畫，並且不間斷的執行~
緊接著加上右邊藍色的動畫效果：
檢視原始碼 CSS
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 | @-webkit-keyframes flickr-blue { 0% { -webkit-transform: translateX(0px); z-index: 1; } 50% { -webkit-transform: translateX(-20px); z-index: 1; } 60% { z-index: 2; } 100% { -webkit-transform: translateX(0px); z-index: 2; } } @-moz-keyframes flickr-blue { 0% { -moz-transform: translateX(0px); z-index: 1; } 50% { -moz-transform: translateX(-20px); z-index: 1; } 60% { z-index: 2; } 100% { -moz-transform: translateX(0px); z-index: 2; } } @-o-keyframes flickr-blue { 0% { -o-transform: translateX(0px); z-index: 1; } 50% { -o-transform: translateX(-20px); z-index: 1; } 60% { z-index: 2; } 100% { -o-transform: translateX(0px); z-index: 2; } } @keyframes flickr-blue { 0% { transform: translateX(0px); z-index: 1; } 50% { transform: translateX(-20px); z-index: 1; } 60% { z-index: 2; } 100% { transform: translateX(0px); z-index: 2; } } |
也一樣是用 translateX(x) 來改變球的水平位置，然後 animation-name 是 flickr-blue。
檢視原始碼 CSS
1 2 3 4 5 6 7 | .loading::before { -webkit-animation: flickr-blue 1s infinite linear; -moz-animation: flickr-blue 1s infinite linear; -ms-animation: flickr-blue 1s infinite linear; -o-animation: flickr-blue 1s infinite linear; animation: flickr-blue 1s infinite linear; } |
順利的話就會看到兩顆球一直移動了~
我個人是覺得有 9 成像了，你覺得呢？
See the Pen [CSS3]用 CSS3 做載入動畫 - 仿 Flickr 載入動畫 by abgne.tw (@abgne-tw) on CodePen.
老師請問此網站首頁的banner裡的(3c產品會依續飛進banner裡的效果)也是用這樣的範例做成的嗎? 因為它既不是flash，但目前不確定jquery是否可以這樣做，謝謝
忘記貼上網址http://www.ibest.com.tw/index.php