css3 字母人动画

前言

最近把hexo博客的主题从Maupassant换成了next，原因大概就是Maupassant的主题太简洁了吧，而且回到顶部的小火箭有点bug。
既然换了next主题，那就看看有什么个性化配置吧。不能光看config.yml里的官方配置，还得搜索一下网上有哪些大神自定义的小挂件小功能什么的。
搜着搜着呢，我就看到一个非常酷炫的字母人踢球动画。

可以去idhyt的主页看看实际效果。
那我呢，不过是小小前端初学者，做不来这么多帧的动画，但是又很喜欢这个效果，那就先写个简单的吧。

实现效果

实现思路

首先呢，我们需要确定：
1. 变形前的英文短句：I am Zhou cong
2. 变形后的人形态动作：简单的一个挥手打招呼动作

确定以上两点后，我们就要画一个草稿图：

最后，就是代码的实现过程：
为每个字母单独设置动画，需要注意的是行内元素不能使用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;
}
/*篇幅问题，省略其他字母的样式*/
......

源码

完整的源码放在github上了，如果有需要可以下载。
欢迎watch和star，不建议fork。
tools/letter-man
放在hexo博客上的效果可以点此预览

总结

可能你们看的时候觉得这篇文章没什么技术含量。原理呢，大家都知道。说白了，不就是每个字母按动画来移动嘛。
我的感受就是，一开始看到这个效果我就觉得很惊艳，非常有创意。也能理解为什么张鑫旭说，css3最重要的也是最关键的改变就是动画。因为动画能更全面地体现一个设计者的才华和灵感。
所以，我自己实现了一个简化版的demo，一方面是为了体会这种耐心设计每一步动画的过程，另一方面也是希望自己能够积累经验，并且将这种感受分享给看这篇文章的你们。

最后，如果你有什么意见或者不解，欢迎评论区留言。希望一起共同学习进步。