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

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

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

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

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

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

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

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

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

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

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

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

最后,隐藏容器外的内容,写个溢出隐藏:

这样就大功告成了!

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

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

1.CSS3中理解transform的使用。

2.CSS选择器的使用

3.CSS3伪类选择器的使用

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

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180429A0XDF700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券