CSS3 文字模糊效果

太空小孩   ·   2012 年 04 月 07 日

之前见过大多数文字模糊效果都是用 IE 专属的 filter:blur 做的,实在是让人无法忍受,所以写了这个非常简单的 CSS3 文字模糊效果,兼容 Chrome,Safari,Firefox,Opera。

代码

1
2
3
4
5
6
7
8
9
10
11
.blurry {
  color: transparent;
  text-shadow: 0 0 15px #666;
  transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
  -webkit-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
  -moz-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
  -o-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
}
.blurry:hover {
  text-shadow: 0 0 0 #666;
}

应用

太空饭否中发送框「鼠标失焦时文字模糊」的效果。代码如下:

1
2
3
4
5
6
7
textarea {
  -webkit-transition: text-shadow 300ms ease-in-out;
}
textarea:not(:focus) {
  color: transparent;
  text-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

另外,Css-Tricks 上有些折腾挺有意思,可以参考。还有复杂点的,支持多浏览器的方案,参阅: