CSS滑动下划线

By | 2015/12/27

搜集翻译了一些下划线的动态效果,感觉可能什么时候会用,这里贴一下~请使用现代浏览器查看效果。

主要就是使用了CSS的:after伪类,再加上一些transition动画效果,设置设置宽度高度,左右距离好像就完事儿了……

下划线从上到下出现

鼠标放上去,你会发现下划线“生长”出来了,不过页面所有的内容也往下走了3像素,这样视觉效果不是很好,你可以将它设置一下绝对定位(就好像下面的那个例子)或者用一个固定高度的容器包裹一下它。

下划线从下到上出现

这个就是使用绝对定位的效果。

下划线从左到右出现

下划线从右到左出现

下划线两边伸展

下划线滑进滑出

下划线反向滑进滑出


有4人评论 CSS滑动下划线

  1. 新人一枚,无意中sougou到你的博客,感觉能学点东西,请问如何关注你

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注