前言
最近把hexo博客的主题从Maupassant换成了next，原因大概就是Maupassant的主题太简洁了吧，而且回到顶部的小火箭有点bug。
既然换了next主题，那就看看有什么个性化配置吧。不能光看config.yml里的官方配置，还得搜索一下网上有哪些大神自定义的小挂件小功能什么的。
搜着搜着呢，我就看到一个非常酷炫的字母人踢球动画。
idhyt的字母人踢球动画
可以去idhyt的主页看看实际效果。
那我呢，不过是小小前端初学者，做不来这么多帧的动画，但是又很喜欢这个效果，那就先写个简单的吧。
实现效果
挥手小人
实现思路
首先呢，我们需要确定：
- 变形前的英文短句：I am Zhou cong
- 变形后的人形态动作：简单的一个挥手打招呼动作
确定以上两点后，我们就要画一个草稿图：
草稿.jpg
最后，就是代码的实现过程：
为每个字母单独设置动画，需要注意的是行内元素不能使用transform，应该先设置display：inline-block;
<!--将每个字符都用span标签包裹，并且对每个字母设置动画效果-->
<div id="wrapper">
<span id="letter1" class="letter">I</span>
<span id="letter2" class="letter"> </span>
<span id="letter3" class="letter">a</span>
<span id="letter4" class="letter">m</span>
<span id="letter5" class="letter"> </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"> </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，一方面是为了体会这种耐心设计每一步动画的过程，另一方面也是希望自己能够积累经验，并且将这种感受分享给看这篇文章的你们。
最后，如果你有什么意见或者不解，欢迎评论区留言。希望一起共同学习进步。
网友评论