javascript - JavaScript 中的模糊移动效果？

Question

客户想要类似 FETBlurryLight 的效果仅不带 Flash。

有人知道用 JavaScript 实现的类似的东西吗？

如果没有这样的效果，是否有好的库可以用来创建一个？或者计算 Canvas 上的像素是正确的方法吗？

Answer 1

您可以手动执行此操作。如果您想要将其用于文本，请将所有单词/字符拆分为跨度，并为它们提供一个大阴影，与文本颜色相同并为消失的动画。

对于图像，您可以使用 css3 的模糊效果，但这并未得到广泛支持。

<小时/>

文本示例:

.OneWord{
    color: rgba(255,255,255, 1); /* white, 100% opacity */
    text-shadow: 0 0 0 0 rgba(255,255,255, 1); /* same for order */
    transition: color 1s, text-shadow 1s; /* create the animation */
    -webkit-transition: color 1s, text-shadow 1s; /* create the animation */
}

.PreFocus{
    color: rgba(255,255,255, 0); /* start white, 0% opacity */
    text-shadow: 0 0 0 0 rgba(255,255,255, 0); /* same for shadow */
}

现在只需循环遍历项目并逐一删除类，假设它们之间有 100 毫秒的延迟，但您可能需要稍微调整一下。

• Made this simple demo ，看起来比想象中更性感
• Even sexier, larger font + more blurry
• And a first step to reverse

我很想看到更多的变体，请随意用我的 fiddle 上的 fork 编辑我的帖子:)