这里收集了11中鼠标滑过文字特效的动画效果，但是并不是所有浏览器都支持。可以使用最新版本的浏览器进行测试是否可用。主要是通过css元素的::before和::after伪元素来制作，少数动画效果使用了SVG和HTML5 Canvas制作而成。

成品演示

这种酷炫的覆盖效果是通过css元素的::before和::after伪元素来制作。所以的特效都是通过:hover鼠标移动到指定的文字触发的，下面是11种特效之一的“KUKURI”演示效果：

通用css样式

.link {
  outline: none;
  text-decoration: none;
  position: relative;
  font-size: 8em;
  line-height: 1;
  color: #9e9ba4;
  display: inline-block;
}

kukuri相关css

.link--kukuri {
  text-transform: uppercase;
  font-weight: 900;
  overflow: hidden;
  line-height: 0.75;
  color: #b2b0a9;
}

.link--kukuri:hover {
  color: #b2b0a9;
}

.link--kukuri::after {
  content: '';
  position: absolute;gi
  height: 16px;
  width: 100%;
  top: 50%;
  margin-top: -8px;
  right: 0;
  background: #F9F9F9;
  transform: translate3d(-100%,0,0);
  transition: transform 0.4s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
  transform: translate3d(100%,0,0);
}

.link--kukuri::before {
  content: attr(data-letters);
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: #424242;
  white-space: nowrap;
  width: 0%;
  transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
  width: 100%;
}

部分html代码

<a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a>

更多效果请参考下载的源代码。