css3 字母人动画

最新推荐文章于 2024-02-12 16:39:14 发布

WhiteYin

最新推荐文章于 2024-02-12 16:39:14 发布

阅读量605

点赞数 1

分类专栏：前端HTML 文章标签： css3 动画 hexo html

本文链接：https://blog.csdn.net/lichking11/article/details/78488449

版权

前端HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前言

最近把hexo博客的主题从Maupassant换成了next，原因大概就是Maupassant的主题太简洁了吧，而且回到顶部的小火箭有点bug。
既然换了next主题，那就看看有什么个性化配置吧。不能光看config.yml里的官方配置，还得搜索一下网上有哪些大神自定义的小挂件小功能什么的。
搜着搜着呢，我就看到一个非常酷炫的字母人踢球动画。
idhyt的字母人踢球动画
可以去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;
}
/*篇幅问题，省略其他字母的样式*/
......

源码

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

总结

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

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