CSS3文字滑动特效，百行内轻松搞定

今天来讲一个很简单的悬停特效，一个按钮效果，在网站上运用还是挺多的。大家可以收藏起来，需要的时候方便看。

今天讲解的效果是这样的：

GIF

下面我们就直接从代码拆分来开发讲解吧

首先，在DOM里面写个容器，在里面定义这个按钮的文字内容，每个字母一个 span，每个 span 有一个 data-text 属性，其值与 span 内的字母相同：

接下来直接写CSS就行了，先按钮居中显示一下：

开始设置按钮的尺寸和文字样式：

按钮的每个字母都设置为行内块元素，以便单独设置动效：

把字母交错地显示在按钮容器之外，第奇数个元素显示在上，第偶数个元素显示在下：

用伪元素为每个字母增加一个红色的副本：

让伪元素的字母也交错显示，位置与其原始元素相对：

为按钮增加鼠标划过样式，设置緩动时间，使其有动画效果：

GIF

最后，隐藏容器外的内容，写个溢出隐藏：

这样就大功告成了！

GIF

这个效果大家学会了吗？其实开发起来非常简单，总代码不到一百行，最终代码如下：

好了，今天的内容就那么多，在这个教程里面最需要注意的是：

1.CSS3中理解transform的使用。

2.CSS选择器的使用

3.CSS3伪类选择器的使用

如果你也喜欢我的教程，点一下赞，转发和关注一下吧，以后还会继续出更多干货教程。