jquery - 如何使用 CSS 为文本添加 curl 动画效果

Question

好吧，我希望使用 CSS 为文本显示 curl 的摇动动画效果，这就是它的样子(忽略背景)。我认为这是一个很酷的效果，但不知道该怎么做。

一个例子对 CSS 动画很有帮助，或者一个脚本也是可以接受的。在此先感谢您的帮助!:)

Answer 1

这可能吗？

不，您想要的效果是不可能的，因为图像中的不同帧不能相互推导出来。如果您将初始图像作为 SVG，那么通过大量的努力，您可以制作类似的东西，但仍然有很长的路要走。

那么我们能走多近呢？

所以，评论区很多评论都在提议抖图。虽然这会得到一个有趣的结果，但原来的东西却丝毫没有动摇。然而，可能需要稍微摇动它以获得一些感觉，尽管它是一个糟糕的替代品。接下来可以尝试使用新的 CSS3 filter 属性来获得一些有趣的结果。例如，在某些帧上增加 contrast()，或者构建/寻找更好的 SVG 过滤器，您可以使用 url() 属性添加它。对于 CSS3 过滤器，我会推荐 this article对于 SVG 过滤器，没有什么比 the original spec 更好的了。我担心(尽管互联网上到处都有一些现成的过滤器)。

我的另一个想法是:blur blur sharpen 序列也可以为线层创造奇迹。保持原始背景层完好无损，例如在原始 gif 中。

动画部分

为了彻底，您将在 CSS3“动画”中以不连续的方式使用上述属性，从一种状态切换到另一种状态(重复每个状态两次以获得正确的效果)。

 @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.*/
 }