今天来讲一个很简单的悬停特效,和上次一样,都是按钮效果,运用在网站上把按钮效果做得交互效果更多
今天讲解的效果是这样的:
下面我们就直接从代码拆分来开发讲解吧
首先,在DOM里面写个容器,在里面定义这个按钮的文字内容,每个字母一个 span,每个 span 有一个 data-text 属性,其值与 span 内的字母相同:
接下来直接写CSS就行了,先按钮居中显示一下:
开始设置按钮的尺寸和文字样式:
按钮的每个字母都设置为行内块元素,以便单独设置动效:
把字母交错地显示在按钮容器之外,第奇数个元素显示在上,第偶数个元素显示在下:
用伪元素为每个字母增加一个红色的副本:
让伪元素的字母也交错显示,位置与其原始元素相对:
为按钮增加鼠标划过样式,设置緩动时间,使其有动画效果:
最后,隐藏容器外的内容,写个溢出隐藏:
这样就大功告成了!
这个效果大家学会了吗?其实开发起来非常简单,总代码不到一百行,最终代码如下:
好了,今天的内容就那么多,在这个教程里面最需要注意的是:
1.CSS3中理解transform的使用。
2.CSS选择器的使用
3.CSS3伪类选择器的使用
如果你也喜欢我的教程,点一下赞,转发和关注一下吧,以后还会继续出更多干货教程。
李老师的前端开发工程师班,在线学习课程马上就要开班咯,你如果是零基础学习,想成为前端开发工程师,也喜欢前端开发,还在犹豫什么,快趁现在优惠活动加入前端开发课程学习吧!
领取专属 10元无门槛券
私享最新 技术干货