奇妙的CSS之Animation
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了奇妙的CSS之Animation相关的知识，希望对你有一定的参考价值。
参考技术A https://codepen.io/alphardex/pen/XWWWBmQ通过animation-delay来控制相同的元素（div）不同延时显示动画
https://codepen.io/alphardex/pen/KKwvKGY
用JS将句子或单词分割成字母，并给每个字母加上不同延时的动画。
https://codepen.io/alphardex/pen/eYYMYXJ
如果要从中间元素开始交错的话，就要给当前元素的延时各加上一个值，这个值就是中间元素的下标到当前元素的下标的距离（也就是下标之差的绝对值）与步长的乘积，即：delay + Math.abs(i - middle) * step，其中中间元素的下标middle = letters.filter(e => e !== "").length / 2
https://codepen.io/alphardex/pen/dyPorwJ
以上是关于奇妙的CSS之Animation的主要内容，如果未能解决你的问题，请参考以下文章