CSS3开发按钮文字滑动特效，百行内简单上手

今天来讲一个很简单的悬停特效，和上次一样，都是按钮效果，运用在网站上把按钮效果做得交互效果更多

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

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

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

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

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

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

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

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

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

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

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

这样就大功告成了！

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

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

1.CSS3中理解transform的使用。

2.CSS选择器的使用

3.CSS3伪类选择器的使用

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

李老师的前端开发工程师班，在线学习课程马上就要开班咯，你如果是零基础学习，想成为前端开发工程师，也喜欢前端开发，还在犹豫什么，快趁现在优惠活动加入前端开发课程学习吧！