[分享]css3文字打散效果

CSS3的强大功能中有一项非常炫酷的效果：文字打散效果。这种效果可以将文本分散成一小块一小块，每个块又可以以不同的形式呈现出来，使得文本看起来非常的特别。所有的这些都只需要使用一些简单的CSS代码来实...

CSS3的强大功能中有一项非常炫酷的效果：文字打散效果。

这种效果可以将文本分散成一小块一小块，每个块又可以以不同的形式呈现出来，使得文本看起来非常的特别。所有的这些都只需要使用一些简单的CSS代码来实现。

.text {
      font-size: 50px;
      color: #000;
      font-weight: bold;
      position: relative;
      text-shadow: 0px 5px 0px #000;
    }
    .text span {
      display: inline-block;
      overflow: hidden;
    }
    .text span:before {
      content: attr(data-text);
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      clip: rect(0,0,0,0);
    }
    .text span:hover:before {
      clip: rect(0,100%,100%,0);
    } 

这里首先给出了文本的样式，包括字体大小、颜色、字体粗细、阴影等等，接下来将这段文本的标签设置为inline-block，方便设置before伪元素的样式。

在before伪元素中，设置content属性为该文本的data-text属性（这样我们就不需要在HTML中再写一遍文本了），并将其position设置为absolute，从而可以让before元素完全覆盖在文本上方。

接下来，通过将clip属性设置为rect(0,0,0,0)，使得before元素不可见。而当鼠标悬停在文本上方时，我们通过将clip属性的值修改为rect(0,100%,100%,0)，使得before元素被完全显示出来，从而展现出文本打散的效果。

这样，我们就可以借助这些简单的CSS代码构建一个非常炫酷的文字打散效果。