背景
最近看到了一个特别炫酷的网站上的一个小细节,下划线的动画。看下他的实现效果。
![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbc20ecc72d944108d8b621ec663be0e~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?%29%20通过看开发者工具的源码展示,我发现它是整了两条下划线,控制在可视范围内的移入移出实现的。%20![underline2.gif]%28https://img-blog.csdnimg.cn/img_convert/76482614d92489637722f510f53e1dbc.gif%29%20你看,其实是有两条下划线的渲染的,只不过你看不看得见而已)
但是,假如我们左边并没有足够的空间存放一条不可见的下划线呢? 像这样。
![](https://i-blog.csdnimg.cn/blog_migrate/b13e6c87b23ee0d140b062dc34a8c8d2.png)
思路与实现
我要把这个下划线也做成文章刚开始的动画。就不是太好借鉴上面的思路。那我的新思路就是给鼠标移入(hover)操作整两个动画,但一个元素又不能添加两个animation
,如果要更换类选择器,又要动用到JS代码,太麻烦了。
于是我就想到了CSS中的::before
和::after
选择器呀。让before的线初始宽度为0,鼠标移入就变成100%;让after的线初始宽度为100%,鼠标移入就变成0,这样不就得了。
前提你要记住。
1.使用width:1