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