CSS3悬停文字幻灯片效果

我见过很多按钮有悬停文字有一个幻灯片的效果,这个效果很棒有很好的交互效果。因为我分享一下如何制作这样一个按钮。

html代码

下面是一个按钮的所有html代码

css代码

下面的几乎是所有的css代码

css解释

注释中有说明,它非常重要,因为我们要垂直放置文字

和必须指定一个值,必须设置为不然你会看到第二个按钮。字体的行高(4em)将文本垂直放置在按钮中,但这可能会根据高度而变化。

CSS3 transitions(由于opera现在支持webkit,因此请注意不使用-o-前缀),没有这个按钮就会弹,出而不是幻灯片方式。相信你可以在js中做到这一点,但是,呃。

悬停时更改背景颜色是可选的,但会为按钮添加一个非常酷的效果,就好像新增的文字向上滑动完全是完全不同的按钮。

我们给第一个链接提供了类用处就在这里,当鼠标悬停到上时,此代码会使第一个链接向上移动。

重要的代码我已经做了详细说明,希望你也能制作一个炫酷的悬停幻灯片按钮

DEMO链接 https://codepen.io/tudou/full/eVyqGV/

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

扫码关注云+社区

领取腾讯云代金券