css3 字母人动画

WEB前端 422 2017-11-09 13:01

前言

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

css3 字母人动画-JEESNS
idhyt的字母人踢球动画

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

实现效果

css3 字母人动画-JEESNS
挥手小人

实现思路

首先呢,我们需要确定:

  1. 变形前的英文短句:I am Zhou cong
  2. 变形后的人形态动作:简单的一个挥手打招呼动作

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


css3 字母人动画-JEESNS
草稿.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,一方面是为了体会这种耐心设计每一步动画的过程,另一方面也是希望自己能够积累经验,并且将这种感受分享给看这篇文章的你们。

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

文章评论