纯CSS实现了下划线的交互动画效果

背景

最近看到了一个特别炫酷的网站上的一个小细节，下划线的动画。看下他的实现效果。

但是，假如我们左边并没有足够的空间存放一条不可见的下划线呢？ 像这样。

思路与实现

我要把这个下划线也做成文章刚开始的动画。就不是太好借鉴上面的思路。那我的新思路就是给鼠标移入（hover）操作整两个动画，但一个元素又不能添加两个animation，如果要更换类选择器，又要动用到JS代码，太麻烦了。

于是我就想到了CSS中的::before和::after选择器呀。让before的线初始宽度为0，鼠标移入就变成100%；让after的线初始宽度为100%，鼠标移入就变成0，这样不就得了。

前提你要记住。

1.使用width:100%的前提是让其本身或父元素有实际的宽度，我用了width:fit-content。
2.使用position: absolute的前提是让其父元素有非static的position。

before的实现

.underline::before{content: "";display: block;position: absolute;height: 1px;background: #000;width: 0;//初始宽度为0left: 0;bottom: 0;transition: width 1s;
}
.underline:hover::before {width: 100%;//鼠标移入就变成100%
} 

单独使用上面这段代码可以实现的效果是

after的实现

.underline::after{content: "";display: block;height: 1px;background: #000;width: 100%;position: absolute;right: 0;bottom: 0;transition: width 1s;
}
.underline:hover::after{width: 0;
} 

单独使用上面这段代码可以实现的效果是

before和after同时使用

把上面两段代码放一起，就是我们想要的效果了吧。是不是有人蠢蠢欲动啦。但是！！！

动手快的小伙伴会发现，诶？我两段代码放一起，怎么效果都没了？？？

你猜猜，为什么？

好，当然是因为当你把这两个动作同时实现的时候，效果抵消了呀。before往右走的同时after也在往右走，中间根本没有间隙，哪怕他有动画效果，你也是看不见的呀。

所以！！！加个延迟效果咯。

transition-delay：表明动画效果属性生效之前需要等待的时间。

最终效果的实现

想想，该让它怎么加这个延迟，才能实现文章刚开始的效果呢？

1.before的动画需要在鼠标刚移入时有延迟，但是鼠标移出时立即执行；
2.after的动画需要在鼠标刚移入时立即执行，鼠标移出时有对应的延迟时间。

只有这样，才能有肉眼可见的闪烁效果。在上面的代码中分别加上如下字段就可以啦～～～

.underline::before{transition-delay: 0s;
}
.underline:hover::before {transition-delay: 1s;
}
.underline::after{transition-delay: 1s;
}
.underline:hover::after{transition-delay: 0s;
} 

看！这样就做完咯！

 到此这篇关于纯CSS实现了下划线的交互动画效果的文章就介绍到这了,更多相关CSS下划线交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！