R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

使用 HTML+CSS 制作纸飞机新 Logo 动效

注意:本文发布于 1838 天前,文章中的一些内容可能已经过时。

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

版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: 一次在 Openshift 上折腾 PHPMailer 的经历
下一篇: 让老司机纷纷翻车的“悄悄话查看器”究竟有啥名堂?

这是我们共同度过的

第 2041 天