[乐意黎转载]CSS滑动下划线

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

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

下划线从上到下出现

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

下划线从下到上出现

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

下划线从左到右出现

下划线从右到左出现

下划线两边伸展

下划线滑进滑出

下划线反向滑进滑出

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值