本文已同步至紙飛機技術部落格：使用 HTML+CSS 製作紙飛機新 Logo 動效

看到藍溼父設計的紙飛機新 Logo，感覺比原來的逼格高了好多，於是靈光一閃想出了一個動效，然後腦子一熱就想用 HTML+CSS 來實現。

先附上最終效果好了：紙飛機 Logo 動效測試

那麼接下來就一步步來吧！

Step1：確定 HTML 結構

左邊 Logo 的五條線我打算用五個 <div> 來繪製不同顏色的長條，然後用 CSS 做二維變換，變成一個正著的飛機，最後整體逆時針旋轉 40° 達到最終效果。

右邊的文字顯然不能直接用文字，因為這個字型不是常見字型，而且中文的 webfont……想想就蛋疼，還是用圖片吧。至於是 PNG 還是 SVG，我曾經試過用 Illustrator 匯出成 SVG，結果生成了一個 20KB 左右的檔案，然而直接儲存成 PNG 然後用 PNGGauntlet 壓縮之後只有 3K 左右，於是果斷用 PNG 了！

於是最終確定的 HTML 的程式碼如下：

<div class="zfj-logo-loading">
    <div class="loading-box">
        <div class="loading-line" id="loading-line-1">
        <div class="loading-line" id="loading-line-2">
        <div class="loading-line" id="loading-line-3">
        <div class="loading-line" id="loading-line-4">
        <div class="loading-line" id="loading-line-5">
    </div>
    <div class="logo-text">
</div>

其中 class="loading-line" 是為了給這五條線設定統一的 CSS，例如寬高、圓角之類的。

Step2：新增基礎的 CSS

這是最麻煩的一步。首先先將文字的那張圖片用 absolute 調整好位置，然後就是左邊的飛機了。

對照著設計圖中擺正的那架飛機，以及那段文字，我們大體可以寫出這樣的 CSS 程式碼：

.loading-box {
    width: 120px;
    height: 120px;
    /* 飛機整體旋轉 -40° */
    transform: rotate(-40deg);
 }
.loading-line {
    /* 寬度之後會重設 */
    width: 100px;
    height: 20px;
    /* 粗細為 20 所以圓角半徑應該是 10 */
    border-radius: 10px;
    /* 絕對定位到左上角，之後用 transform 來移動和旋轉 */
    position: absolute;
    top: 0;
    left: 0;
    /* 為了方便旋轉，設定了變換原點為左邊圓的圓心 */
    transform-origin: 10px 10px;
}
/* 給每條線單獨設定顏色、長度、變換、層序關係 */
#loading-line-1 {
    background: rgba(128, 171, 249, 0.8);
    width: 45px;
    transform: rotate(90deg) translateX(70px) translateY(-55px);
    z-index: 5;
}
......
.logo-text {
    width: 350px;
    height: 56px;
    position: absolute;
    top: 45px;
    left: 155px;
    /* 為了圖省事，直接將這堆文字存成一張圖片了 */
    background: url(zfj-logo-text.png);
}

Step3：新增動畫

動畫時長是 5s，對於飛機的每一條線，有如下兩個過程：

1. 從無到有的一個小圓點
2. 小圓點逐漸擴張成一條線
3. 所有線同時淡出

而對於整個飛機，有一個搖擺的效果，至此這些動畫是需要重複播放的。

對於右邊的文字，只有一個淡入+移動，只播放一次。

這是飛機動畫：

/* 一起搖擺 */
@keyframes loading-animate {
    0% { transform: rotate(-40deg); }
    20% { transform: rotate(-37deg); }
    21% { transform: rotate(-43deg); }
    22% { transform: rotate(-37deg); }
    23% { transform: rotate(-43deg); }
    24% { transform: rotate(-40deg); }
}
/* 藍線的動畫十分靠前 */
@keyframes line-1-animate {
    0% { opacity: 0; width: 20px; }
    5% { opacity: 1; width: 20px; }
    8% { width: 45px; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
......
/* 飛機的設定 */
.loading-box {
    animation: loading-animate 5s linear infinite;
}
.loading-line {
    /* 無限迴圈，nop 會在後面被覆蓋 */
    animation: nop 5s ease-in-out infinite;
}
#loading-line-1 {
    animation-name: line-1-animate;
}
......

這是文字動畫：

@keyframes text-animate {
    0% { transform: translateX(-20px); opacity: 0; }
    70% { transform: translateX(-20px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.logo-text {
    /* 播放一次就夠了 */
    animation: text-animate 1.75s ease-out;
}

再剩下就是一些細節調整了。

EOF.