如何使用CSS向文本添加卷曲动画效果

Question

我希望使用CSS向文本显示一个卷曲的动画效果，这就是它的样子（忽略背景）。我觉得它很酷但不知道怎么做。

示例在CSS动画中非常有用，或者脚本也可以接受。在此先感谢您的帮助！:)

Answer 1

有可能吗？

否，您正在寻找的效果不可能，因为图片中的不同帧无法相互派生。如果您将初始图像作为SVG，您可以通过大量的努力来制作类似的东西，但它仍然会有很长的路要走。

那么我们能接近多少？

因此，在评论部分，很多评论都建议动摇形象。虽然这会得到一个有趣的结果，但原来实际上并没有动摇。然而，可能有必要稍微摇一摇以获得一些感觉，尽管它是一个糟糕的替代品。接下来可以使用新的CSS3 filter属性来获得一些有趣的结果。例如，在某些帧上增加contrast()，或者构建/找到可以使用url()属性添加的更好的SVG过滤器。对于CSS3过滤器，我建议使用this article，对于SVG过滤器，没有比the original spec更好的事情了（尽管在互联网上也有一些现成的过滤器）。

我的另一个想法是：blur blur sharpen序列也可以为线图层创造奇迹。保持原始背景图层完整无缺，例如原始gif。

动画部分

为了彻底，你可以在CSS3＆＃39;动画中以不连续的方式使用上面的属性。像这样从一种状态切换到另一种状态（重复每个状态两次以获得正确的效果）。

 @keyframes animationName {
  0%{ transform: rotate(r) translate(x,y); filter: somefilter(f) }
  19%{ /* same as above */ }
  20%{ /* slightly different values for some or all of `r`, `x`, `y` and `f` */ }
  39%{ /* same as above again */ }
  /*etc.*/
 }