前言

最近把hexo博客的主題從Maupassant換成了next，原因大概就是Maupassant的主題太簡潔了吧，而且回到頂部的小火箭有點bug。
既然換了next主題，那就看看有什么個性化配置吧。不能光看config.yml里的官方配置，還得搜索一下網上有哪些大神自定義的小掛件小功能什么的。
搜著搜著呢，我就看到一個非常酷炫的字母人踢球動畫。

idhyt的字母人踢球動畫

實現效果

揮手小人

實現思路

首先呢，我們需要確定：

1. 變形前的英文短句：I am Zhou cong
2. 變形后的人形態動作：簡單的一個揮手打招呼動作

確定以上兩點后，我們就要畫一個草稿圖：

草稿.jpg

最后，就是代碼的實現過程：
為每個字母單獨設置動畫，需要注意的是行內元素不能使用transform，應該先設置display：inline-block;

<!--將每個字符都用span標簽包裹，并且對每個字母設置動畫效果-->
      <div id="wrapper">
           <span id="letter1" class="letter">I</span>
            <span id="letter2" class="letter">&nbsp;</span>
            <span id="letter3" class="letter">a</span>
            <span id="letter4" class="letter">m</span>
            <span id="letter5" class="letter">&nbsp;</span>
            <span id="letter6" class="letter">Z</span>
            <span id="letter7" class="letter">h</span>
            <span id="letter8" class="letter">o</span>
            <span id="letter9" class="letter">u</span>
            <span id="letter10" class="letter">&nbsp;</span>
            <span id="letter11" class="letter">c</span>
            <span id="letter12" class="letter">o</span>
            <span id="letter13" class="letter">n</span>
            <span id="letter14" class="letter">g</span>
        </div>

#wrapper {
    font-size: 0;
    width: 500px;
    margin: 300px auto;
    text-align: center;
}

.letter {
    display: inline-block;
    font-size: 20px;
}
/*動畫時長和次數統一使用變量，方便修改*/
:root{
    --animation-time:4s;
    --animation-count:infinite;
}
/*0到25%進行變形，25%到75%保持人形態，75%到100%變形結束*/
@keyframes animation1{
    from,to{
        transform:translate(0,0);
    }
    25%,75%{
        transform:translate(100px,20px);
    }
}

#letter1 {
    animation: animation1 var(--animation-time) var(--animation-count) ease;
}
/*篇幅問題，省略其他字母的樣式*/
......

源碼

1. 完整的源碼放在github上了，如果有需要可以下載。
   歡迎watch和star，不建議fork。
   tools/letter-man
2. 放在hexo博客上的效果可以點此預覽

總結

可能你們看的時候覺得這篇文章沒什么技術含量。原理呢，大家都知道。說白了，不就是每個字母按動畫來移動嘛。
我的感受就是，一開始看到這個效果我就覺得很驚艷，非常有創意。也能理解為什么張鑫旭說，css3最重要的也是最關鍵的改變就是動畫。因為動畫能更全面地體現一個設計者的才華和靈感。
所以，我自己實現了一個簡化版的demo，一方面是為了體會這種耐心設計每一步動畫的過程，另一方面也是希望自己能夠積累經驗，并且將這種感受分享給看這篇文章的你們。

最后，如果你有什么意見或者不解，歡迎評論區留言。希望一起共同學習進步。