【转载】CSS3 文字溶解效果

代码如下：
<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <title>CodePen - word animation | word filter</title>
<style>
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: black;
  padding:0;
  margin:0;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  filter: contrast(20);
  background-color: black;
  overflow: hidden;
}

h1 {
  font-family:consolas, 黑体;
  color: white;
  font-size: 4rem;
  text-transform: uppercase;
  line-height: 1;
  animation: letterspacing 5s infinite alternate ease-in-out;
  display: block;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate3d(-50%, -50%, 0);
  letter-spacing: -2rem;
  white-space:nowrap; 
  padding:0;
  margin:0;
}

@keyframes letterspacing {
  0% {
    letter-spacing: -2rem;
    filter: blur(1rem);
    color:red;
  }
  50% {
    filter: blur(0.5rem);
  }
  80% {
    letter-spacing: .5rem;
    filter: blur(0.1rem);
    color: #fff;
  }
  100% {
    letter-spacing: 0.5rem;
    filter: blur(0rem);
    color: #fff;
  }
}
</style>

</head>

<body>

<div class="container">
  <h1>ABCDE 中文测试</h1>
</div>

</body>
</html>
参考来源：http://www.cnblogs.com/coco1s/p/7519460.html