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