Jade 的部份梅干有寫一篇JADE基本使用教學：規則、文字、繼承、匯入、函式寫法，有興趣的人可以參考學習。

回到主題吧~我們在前幾篇的教學中已經學會如何快速輸出元素了，但除了 id 跟 class 之外，其它輸出的屬性都是 Emmet 內建的一些基本必須的，如果是再編寫過程中想要針對屬性來自訂的話，那...要如何來寫呢？

自訂屬性 Custom attributes: [attr]

如同在 CSS 中選擇器中篩選元素屬性的用法一樣，在 Emmet 中一樣是使用 [] 中括號的方式來表示要自訂屬性

如果一次想要自訂多個屬性的話，只要在同一個 [] 中括號中將每個屬性用空格隔開就可以了。假設筆者要產生一個超連結連到 http://abgne.tw 並用另開視窗的方式的話：

屬性的值用雙引號或單引號來包裹在 Emmet 中都是允許的，甚至不包也可以

但要注意的話，若屬性值中有空格的話，那就一定得選用雙引號或單引號。畢竟 Emmet 自訂多屬性是用空白當區隔的

仔細看，一開始 data-title 值是寫成 'Emmet is cool'，所以可以產生正確的屬性內容，不過若沒用雙引號或單引號包裹字串的話，就會變成 is 跟 cool 都是自訂屬性了。從這個錯誤的範例也能看到一個技巧，如果只有寫屬性但沒給值的話，一樣會產生該屬性，只是值為空字串而已。

複製 Multiplication: *

如果想要一次產生一組類似的區塊的話，我們可以使用 * 來當做類似數學的乘法效果，假設需要 5 個一樣的內容就是 *5

再假設筆者想要再一個 .container 中放置 3 個 .block，然後每個 .block 中都有 1 個 h3 標題及 1 個 p 段落，在 p 段落中放置一些文字及一個 read more 的超連結

應該比在那邊選取區塊後複製&貼上方便吧！

編號 Item numbering: $

接著再來看喔~一般我們輸出 li 時可能會給它們一個共用的 .className，同時也可能再多一給一個帶有流水序號的 .className，那麼再搭配 Emmet 時也能快速的產生

使用 $ 錢符號就能自動幫您依序帶入數字了，不過它是從一位數開始累加，如果您的數字是想要固定呈現兩位數或是三位數的話，只要補上相對數量的 $ 即可，例如：.item-$$ 就是會產生 .item-01、.item-02...；.item-$$$ 則是產生 .item-001、.item-002...

不過預設數字是從 1 開始累加，如果想要指定起始數字的話，要在 $ 後面多補上一個 @ 並加上指定的起始數字，例如 .item-$@6

最後還能變更的就是要由小大到編號，還是由大到小編號。Emmet 預設的編號是由小到大，如果是要反過來由大到小的話，那麼就是在 @ 後面補上一個 - 負號(就算沒要設定起始值也是要多補 @)

從範例中能看到若是要起始值且又要由大到小排的話，是要把 - 負號加在數字前面的喔！

筆者現在要來教大家如何將這些 JavaScript 跟 CSS 資料分別合併同一支檔案，並且順便將檔案進行壓縮來節省檔案大小。

首先建立一個練習用的 gulp2 資料夾，在裡面的結構是像這樣

會用兩個 CSS 跟兩個 JS 檔案只是為了教當有多個檔案時要怎樣合併起來而已，如果懶的建立的話，可以直接下載練習包

接著我們就來安裝等等要用到的 Gulp 及相關套件，先執行安裝指令

1

npm install gulp gulp-concat gulp-uglify gulp-uglifycss

我們這次除了 Gulp 之外，還多裝了 3 個套件，它們的功用分別是：
gulp-concat: 合併檔案
gulp-uglify: 壓縮混淆 JavaScript 檔案
gulp-uglifycss: 壓縮 CSS 檔案

再來一樣是在 gulp2 資料夾中新增一個 gulpfile.js，然後用編輯器開啟。先把要用到的套件先引用進來：

1
2
3
4

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');

接著先建立一個合併及壓縮 JavaScript 的任務，所以繼續編輯 gulpfile.js：

1
2
3
4
5
6

gulp.task('uglify:js', function(){
	return gulp.src('src/js/*.js')
		.pipe(concat('app.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('dist/js'));
});

先來解釋一下這段語法做了什麼事：
筆者建立了一個叫做 gulify:js 的任務。然後先用 gulp.src('src/js/*.js') 來選取要加工處理的檔案，像筆者就把 src/js/ 中屬於 *.js 的選取起來，接著串 concat('app.min.js') 來把剛合併的內容寫入到指定的檔案中。再來就是使用 uglify() 將檔案內容進行壓縮混淆，最後就是檔案存檔到 dist/js 資料夾中啦。

好了好了，先來執行這 uglify:js 任務吧

1

gulp uglify:js

如果沒錯誤的話，就會看到多一個 dist 資料夾及我們的 app.min.js 了

各位可以開啟 app.min.js 來看看是不是真的是原本的 JavaScript 內容，且是不是真的有壓縮了！

接著讓我們繼續建立處理 CSS 的任務：

1
2
3
4
5
6

gulp.task('uglify:css', function(){
	return gulp.src('src/css/*.css')
		.pipe(concat('style.css'))
		.pipe(uglifycss())
		.pipe(gulp.dest('dist/css'));
});

這任務名稱是 uglify:css，主要動作是跟處理 JavaScript 的一樣，只是把 uglify() 改用 uglifycss() 而已。OK~一樣來執行看看

1

gulp uglify:css

執行完成後會在 dist 資料夾中又多出一個 css 資料夾及 style.css 檔案

各位一樣可以開啟 style.css 看看內容是否正確且壓縮過了！

雖然這兩個任務都能正確的執行，但要分別下指令就有點麻煩，所以我們來建立一個專門用來進行壓縮 JavaScritp 與 CSS 的任務，同時順便將 src/index.html 一併搬到 dist/index.html 吧：

1
2
3
4

gulp.task('uglify', ['uglify:js', 'uglify:css'], function(){
	return gulp.src('src/index.html')
		.pipe(gulp.dest('dist'));
});

使用 gulp.task() 時，第二個參數可以是一個陣列，這陣列裡面放的是指要執行這任務前要先執行哪些任務，當執行完後就接著執行第三個參數指派的動作(如果有給的話)。

快來執行看看

1

gulp uglify

是不是都有乖乖的執行呢~

如果是下載練習包的話，我事前已經在 index.html 中先寫好引用 app.min.js 跟 style.css 了，所以執行開啟瀏覽的話...

看了這一連串的工作是不是頭的暈了呢？以上都還沒加上各種測試工作咧！如果在瀏覽器上查看發現有錯要進行小變更時，以上動作可能得再來一次了 XD。因此就有像是 Gulp.js 這樣的自動化建置工具出現啦！只要我們把要執行的各種動作都寫成一個個任務後，就能輕鬆完成一連串的動作囉！

不過在開始安裝 Gulp.js 之前，我們得先安裝 Node.js 才能使用方便的 npm 工具，再透過 npm 來安裝 Gulp.js 及相關的外掛套件工具。

Node.js 官網：https://nodejs.org/en/

理論上會自動判斷瀏覽者的系統並提供相對應版版本的安裝程式供人下載，如果想選擇其它系統或是版本的話，可以自己再去點 Downloads 後下載。

安裝的方式就跟大部份程式一樣，就是下一步、下一步、下一步、安裝、完成。
接著先開啟命令提示字元或終端機並分別輸入(Windows 及 Mac 都相同)

1

node --verion

1

npm --verion

若安裝過程沒問題的話，就會看到各自的版本號了

接下來我們先來安裝全域的 Gulp 工具，先輸入

1

npm install --global gulp

如果在 Mac 上安裝有問題的話，記得先加上 sudo 指令

1

sudo npm install --global gulp

大概等個一下下時間就會安裝完成了，這時我們可以藉由查看版本號來確認是否安裝完成。再輸入

1

gulp --version

目前準備工作都差不多了，接著就是先建立一個專案的資料夾，然後再將命令提示字元或終端機切換進入到該資料夾中。這時要分別針對專案安裝各自的 Gulp 套件

1

npm install gulp

這邊要注意一下喔！一開始安裝全域的是有加上 -global 參數，這邊是針對專案的就不需要了(若最後有出現 WARN 先別管它，不影響)

等它結束後查看資料夾，應該會看到一個 node_modules 資料夾，這其中會放置一些套件程式

這時候再輸入一次

1

gulp --version

你就會看到除了全域之外還多了一個是本地的 Gulp 版本號內容

最後讓我們在專案資料夾中新增一個檔名為 gulpfile.js 的文件，然後用編輯器來開啟它。然後先建立一個任務項目：

1
2
3
4
5

var gulp = require('gulp');
 
gulp.task('hello', function(){
	console.log('Hello Gulp.js');
});

因為我們需要用到 Gulp，所以透過 require() 的方式來把它載入。接著使用 gulp.task(任務名稱, Fn) 的方式來建立一個新的任務。筆者這邊先建立一個名叫 hello 的任務，當執行這任務時輸出 'Hello Gulp.js' 字串。

好的，存檔完成後，我們再切換到命令提示字元或終端機來執行任務囉。透過 Gulp 執行指定任務的語法很簡單，就是 'gulp 任務名稱'：

1

gulp hello

順利的話就會看到任務啟動及執行結果了

雖然看起來好像沒什麼了不起的，但...至少能確認整個 Gulp 是能運作了，接下來筆者會一一分享如何來進行那...一連串的動作。

文字 Text: {}

如果想要產生元素中的文字時，可以透過加上 {} 大括號並在其中補上想要的內容來產生

基本上 {Text} 也能把它當是一個元素，只是它是純文字而已

不過若是接在 HTML 元素後的話，有些小細節可能要注意一下。例如當我們使用 a{Click Me} 跟 a>{Click Me} 時，輸出的 HTML 是一樣的

但若是之後若有接其它元素的話，結果可是差很多的喔。例如 a{Click}+span{ Me} 跟 a>{Click}+span{ Me}

主要是因為使用了子階層 > 的關係，span 也變成是 a 的子元素了。再來看另一個例子：div>{Click}+a{ here}+{ to continue} 跟 div{Click}+a{ here}+{ to continue}

因為 {Text} 也是個元素，所以若不是在子階層中的話，就會變成在元素外的文字了。請各位同學在使用 Emmet 時要小心這差異。

最後我們來補充一個類似佔位用的文字功能。如果我們想要產生一些落落長的文字來讓區塊看起來很豐富的話，可以透過使用 lorem 這個關鍵字來產生一大串的英文詞句內容

使用 lorem 會輸出有 30 個單字的文字內容，如果想要自訂單字數的話，只要在 lroem 後接個想要的數字就可以了

Lorem ipsum 主要是常出現在排版設計用，要了解的話請參考一下維基百科。

筆者在此篇會一一解說子階層、兄弟階層、上一層及群組等用法。

子階層 Child: >

Emment 在設定子階層用語法跟 CSS 中的是一樣使用 > 符號，假設我們要在 header 區塊中放置 nav，並在 nav 中在加上 ul li 等動作都可以透過子階層的方式來一次寫完

一樣能把 #id 及 .className 搭配一起使用

兄弟階層 Sibling: +

如果我們要在 nav 前先放一個 h1 的話，那要怎樣來寫呢？(...3秒後)對~就是跟 CSS 兄弟選擇器一樣使用 + 符號

群組 Grouping: ()

如果上面兩個用法都沒問題的話，再來我們想要在跟 nav 同一階層下再多放一個 div 的話，雖然知道 + 符號可用在兄弟元素中，但因為 nav 本身就包了一堆元素，這一堆基本上都是屬於 nav 這一個兄弟的，因此為了表示他們是一組的，我們可以使用數學上常用的 () 括號的方式來處理。把用 () 括號起來的當成一個階層來看待，所以我們的語法就可以這樣寫

那...如果筆者想要幫 header 再多一個兄弟元素的話，一樣可以用 () 括號把子元素都包起來再增加新的兄弟元素

上一層 Climb-up: ^

有沒有越來越覺得神奇的感覺了咧！不過如果我們可以在 header 中的最後一個 div 子元素這邊能往上爬一層的話，就算不用 () 括號來把子元素包起來也能做到同樣的結果

這邊使用 ^ 符號來達到往上爬一層，如果想要爬兩層的話...別懷疑，就是 ^^

筆者想要在 div.inner 下方多插入一個 img 元素，如果是在 span 後只用一個 ^img 是只能爬過 span 來到 p 段落中而已；若是使用 ^^img 才能順利的爬過 span 跟 p。

這幾個語法要記得多練習幾次，當熟練後能在編寫 HTML 時超展開的囉！

TagName:

假設我們要產生一個 h1 元素，那麼我們只要直接輸入 h1 後，按下 Tab 鍵或是 Ctrl+E 鍵就能產生出包含起始元素及結束元素的內容

只要是 HTML 所定義的元素都能快速產生出相對應的語法，甚至還會帶入跟該元素有關的屬性，例如：a 或是 img 等等

除了標準的元素之外，它也內建了一些快速產生 HTML 樣板的快捷語法，像是要產生一個標準的 HTML5 樣板的話，我們可以直接輸入 ! 或是 html:5

若是 Emmet 不認識的元素的話，如果是使用 Ctrl+E 鍵來觸發 Emmet 的話，它會直接當成標籤來轉換；但如果是用 Tab 鍵則不會觸發

.className:

我們也可以在產生元素時直接加上指定的 .className，例如：h1.title

若是要針對單一元素要加上多個 .className 的話，只要把它們接在一起就可以了

雖然 Emmet 有隱性的判斷標籤的能力，但一般預設的元素是 div，所以如果直接寫 .className 的話，就會自動產生一個 div 元素然後加上指定的 .className

#id:

當然我們也可以幫元素加上指定的 #id

同時加上 #id 及 .className 也是沒問題的，只要接在一起寫就可以了

更多關於元素的快捷縮寫方式都可以在官方的文件中找到：Emmet Cheat Sheet

]]> https://abgne.tw/web/emmet-tutorial-series-basic.html/feed 1 https://abgne.tw/phaser/phaser-example/load-an-image.html https://abgne.tw/phaser/phaser-example/load-an-image.html#respond Tue, 05 Aug 2014 08:55:52 +0000 http://abgne.tw/?p=8077 Phaser 官方有一系列的範例，我會一一的針對這些範例來帶各位看看 Phaser 這遊戲框架能做到怎樣的效果。首先來看第一個範例，從範例中可以學到使用 Phaser 的基本用法跟如何預載圖片]]> Phaser 官方有一系列的範例，我會一一的針對這些範例來帶各位看看 Phaser 這遊戲框架能做到怎樣的效果。首先來看第一個範例，從範例中可以學到使用 Phaser 的基本用法跟如何預載圖片。

在網頁中基本上只要有個 div 就可以了：

檢視原始碼 HTML

1 2 3

<body> <div id="phaser-example"></div> </body>

當然要記得引用 phaser.js 才行喔！接著來建立一個簡單的遊戲世界吧：

檢視原始碼 JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 在 #phaser-example 中產生遊戲畫布 var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });   function preload() { // 載入一張圖片, 將名稱命名為 pikachu game.load.image('pikachu', 'assets/pics/pikachu.jpg'); }   function create() { // 加入一個 Sprite, 影像來源就是一開始載入的圖片 game.add.sprite(0, 0, 'pikachu'); }

只要使用 new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig) 就能建立一個遊戲的世界了。在建立的過程中除了指定寬高之外，我們還能決定是要使用 Canvas 還是 WebGL 方式來渲染畫面。一開始我們先傳入前 5 個參數就好，其它的之後再說明。

在建立遊戲世界時，可以自訂在 preload，create，update 及 render 等狀態時要執行的動作；像是在 preload 狀態時預載各種圖片資源檔等等。

我們在 preload 狀態時使用 Loder 的 image(key, url) 方法來載入圖片，並給予一個特別的名稱來識別字。

當完成後即會進入到 create 狀態，在這邊我們就能取用剛剛已經預載下來的資源檔案來加入像是圖片或是 Sprite 等元素了。而要加入一個 Sprite 則可以使用 GameObjectFactory 的 sprite(x, y, key) 方法來將指定識別字的資源檔放在指定的座標上囉！

若沒有意外的話，瀏覽範例時就會看到一隻皮卡丘在畫面的左上角了：

各位可以試著載入不同的圖片並一一加到指定的座標上。

範例 1

官方範例網址：load an image

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

]]> https://abgne.tw/phaser/phaser-example/load-an-image.html/feed 0 https://abgne.tw/css/css3-lab/css3-text-shadow.html https://abgne.tw/css/css3-lab/css3-text-shadow.html#comments Tue, 14 Jan 2014 15:59:13 +0000 http://abgne.tw/?p=8051 text-shadow 文字陰影的效果，進而產生像是會發光或是有 3D 立體效果]]> 在 CSS3 中除了能將區塊加上陰影之外，也能針對一般文字加上 text-shadow 文字陰影的效果，進而產生像是會發光或是有 3D 立體效果。

檢視原始碼 CSS

1	text-shadow: none | [ <length>{2,3} && <color>? ]#

一段文字可以套用多組陰影效果，而一組陰影的完整設定是：

檢視原始碼 CSS

1	text-shadow: h-shadow v-shadow blur spread color;

基本上參數的用法跟 box-shadow 區塊陰影 的是一樣的，只差在沒有 inset 內陰影的參數而已：

檢視原始碼 CSS

1 2 3 4 5

h-shadow：水平位移距離 v-shadow：垂直位移距離 blur：模糊半徑 spread：擴散距離 color：顏色

一樣來直接看範例吧~

檢視原始碼 HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<body> <div class="text"> HTML5 & CSS3 </div>   <div class="text"> HTML5 & CSS3 </div>   <div class="text"> HTML5 & CSS3 </div>   <div class="text"> HTML5 & CSS3 </div> </body>

基本的設定文字顏色、大小：

檢視原始碼 CSS

1 2 3 4 5 6 7 8 9

.text { background-color: #ccc; height: 100px; font-size: 32px; color: #656d78; line-height: 100px; text-align: center; margin: 20px 0; }

現在還未套上任何的文字陰影效果

加上簡單的陰影：

檢視原始碼 CSS

1 2 3

.text:nth-child(1) { text-shadow: 2px 2px #434a54; }

h-shadow 或 v-shadow 為正值時的陰影是往右及往下；反之則往左往上

若想要有模糊的效果的話，就要指定 blur 值：

檢視原始碼 CSS

1 2 3

.text:nth-child(2) { text-shadow: 2px 2px 3px #434a54; }

如果要套上多組陰影效果的話，只要每組陰影設定間加上逗號(comma)區隔就可以了：

檢視原始碼 CSS

1 2 3

.text:nth-child(3) { text-shadow: 2px 2px 3px #0f0, 10px 10px 3px #f00, -10px -5px 3px #00f; }

若想讓文字產生光暈(發光)效果的話，一樣可以使用 text-shadow。除了用來裝飾文字之外，也能使跟圖片重疊的文字變的更好閱讀。

檢視原始碼 CSS

1 2 3

.text:nth-child(4) { text-shadow: 0px 0px 10px #fff; }

筆者在這範例上沒加上任何位置的偏移，只有在原地產生模糊效果

But...您看的出來有什麼陰影嗎？有發光嗎？都沒有吧~這是因為陰影顏色太淺，然後又只有一層陰影，所以看不出效果來。現在筆者將同一種陰影效果累加多次：

檢視原始碼 CSS

1 2 3

.text:nth-child(4) { text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff; }

正所謂團結力量大...有看到那道光了嗎XD

text-shadow 除了產生陰影之外，只要配合其它不同的 CSS 設計後，就能玩出意想不到的效果的唷。

範例 1

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

]]> https://abgne.tw/css/css3-lab/css3-text-shadow.html/feed 2 https://abgne.tw/css/apply-css3/css3-flickr-loading-spinner.html https://abgne.tw/css/apply-css3/css3-flickr-loading-spinner.html#comments Mon, 13 Jan 2014 08:36:50 +0000 http://abgne.tw/?p=8036 剛剛本來是要跟梅干 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.

範例 1

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

]]> https://abgne.tw/css/apply-css3/css3-flickr-loading-spinner.html/feed 2