从textarea文本到无序列表的CSS动画过渡

时间:2019-04-17 09:37:32

标签: javascript css css-animations

如何将文本区域中的文本动画化为无序列表,以使文本看上去可以飞到列表中正确的最终位置?

我见过类似的效果,但从未想到它实际上是如何完成的。我不太了解css动画的工作方式。如果我不得不猜测,我会使用文本区域的内容,使用句点(“。”)作为断点将其拆分为多个块。然后,每个句子都会... 以某种方式飞到它的新最终位置。

之前:

<textarea>
Hello world. I am some text.
</textarea>

之后

<ul>
<li>Hello world.</li>
<li>I am some text.</li>
</ul>

进行初始拆分应该非常容易,这是飞行动画让我抓狂了。坦白说,我什至不确定分裂会如何。文本区域实际上是伪文本区域吗?我希望看到一个可行的示例。

0 个答案:

没有答案