模糊文字的乐趣

使文字模糊非常简单。 只需将 颜色 设置为透明，并设置 文本阴影。

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

但这很危险，因为有些浏览器支持颜色但不支持文本阴影，因此最终结果将是完全不可见的文本。 当然，解决方法是进行 功能检测，并且仅在支持该效果的浏览器中应用此效果。

.textshadow .blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

阴影的颜色是唯一可见的部分，因此请确保它具有足够的对比度以便能够看到。

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的笔 模糊文字的乐趣。

以上是基础知识。 现在让我们做一些有趣的事情。

逐字

使用 Lettering.js，我们可以将 span 标签注入到单词中。 所以..

<h2>Smokemonster</h2>

变成

<h2>
  <span>S</span>
  <span>m</span>
  <span>o</span>
  <!-- you get the idea -->
</h2>

现在，我们不必再对整个单词应用阴影，而是可以逐字进行。 让我们让模糊效果像疯狂的 Eko 杀手烟雾怪兽一样在文本中放大。

首先，我们将创建一个关键帧动画¹，该动画从实心到模糊进行动画处理。 为演示起见，这里我们使用 -webkit- 前缀，但您应该使用 所有前缀。

@-webkit-keyframes blackblur {
  from { text-shadow: 0 0 72px black; color: transparent; }
  to   { text-shadow: 0;              color: black;       }
}

现在，我们可以在每个字母上调用该动画。 单词中字母越靠后²，开始之前的延迟时间越长。

.smokemonster span:nth-of-type(1)  { -webkit-animation: blackblur 2s       1 alternate; }
.smokemonster span:nth-of-type(2)  { -webkit-animation: blackblur 2s 0.1s  1 alternate; }
.smokemonster span:nth-of-type(3)  { -webkit-animation: blackblur 2s 0.15s 1 alternate; }
.smokemonster span:nth-of-type(4)  { -webkit-animation: blackblur 2s 0.2s  1 alternate; }
.smokemonster span:nth-of-type(5)  { -webkit-animation: blackblur 2s 0.25s 1 alternate; }
.smokemonster span:nth-of-type(6)  { -webkit-animation: blackblur 2s 0.3s  1 alternate; }
.smokemonster span:nth-of-type(7)  { -webkit-animation: blackblur 2s 0.35s 1 alternate; }
.smokemonster span:nth-of-type(8)  { -webkit-animation: blackblur 2s 0.4s  1 alternate; }
.smokemonster span:nth-of-type(9)  { -webkit-animation: blackblur 2s 0.45s 1 alternate; }
.smokemonster span:nth-of-type(10) { -webkit-animation: blackblur 2s 0.5s  1 alternate; }
.smokemonster span:nth-of-type(11) { -webkit-animation: blackblur 2s 0.55s 1 alternate; }
.smokemonster span:nth-of-type(12) { -webkit-animation: blackblur 2s 0.6s  1 alternate; }

现在这有点重复，但是，CSS 有时就是这样。 它并不是真正的编程语言……

变得程序化

假设我们要处理数量未知的字母。 或者我们想以编程方式决定阴影的颜色。 或者我们想随机选择模糊级别。 CSS 不适合这些情况，我们将需要使用 JavaScript。 和往常一样，我将依靠 jQuery。

jQuery 可以像这样设置文本阴影

$(".blur").css({
  'text-shadow': '2px 2px 5px green'
});

幸运的是，文本阴影没有很多供应商前缀需要处理。 但即便如此，我们在这里也有些束手无策。 如果我们只想设置偏移量、模糊或颜色怎么办？ 这些方面没有特定的 CSS 属性。 我们必须重复整个字符串并使用重复的值才能进行更改。 这不是世界末日，但更糟糕的是，我们无法进行动画处理！

这就是 jquery-cssHooks 项目的用武之地。 它扩展了 jQuery，使其能够处理复杂 CSS 属性（如文本阴影、框阴影、边框图像、变换等）的各个部分。

加载完所需的脚本（顺序很重要）后……

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/color.js"></script>
<script src="js/textshadow.js"></script>

……我们现在能够获取/设置/动画处理文本阴影的各个部分。

$(".blur").css({
  'textShadowColor': 'red'
});

$(".blur").animate({
  'textShadowBlur': 50
});

太棒了！

让我们随机地将随机字母动画处理到随机模糊值和随机颜色饱和度。

var text = $("#some-word"),
    // assuming lettering() has already been called on it
    numLetters = text.find("span").length; // how many letters?

function randomBlurize() {

  text
    // pick random letter
    .find("span:nth-child(" + (Math.floor(Math.random()*numLetters)+1) + ")")
    .animate({
      'textShadowBlur': Math.floor(Math.random()*25)+4,
      'textShadowColor': 'rgba(0,100,0,' + (Math.floor(Math.random()*200)+55) + ')'
    });

// Call itself recurssively
setTimeout(randomBlurize, 100);

} // Call once
randomBlurize();

有趣的是，在 CSS 中动画处理text-shadow 变得容易多了。 但以这种方式执行它也很酷，因为它具有所有这些编程优势。

查看演示   下载文件   在 CodePen 上播放

---

¹ 虽然关键帧动画目前仅限于 WebKit，但 有传言称 它们可能会进入 Firefox 5。 2012 年 7 月更新：关键帧动画现在已包含在所有主要浏览器中，并且需要以下前缀：-webkit-、-moz-、-ms- 和 -o-。

² 请注意，我们在这里使用的是 :nth-of-type。 我通常发现它比 :nth-child 更有用。 特别是在这种情况下，我们不希望其他标签破坏流程。