本文已同步至纸飞机技术博客：使用 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.