CSS 实现动画环绕下划线效果
发布于: 2021 年 04 月 07 日
目标
在链接下方的彩色下划线，具有悬停效果，其中该行后退并被另一条不同颜色的线替换。在这个动画中，线条不应该接触，在它们之间留出一些空间。
换行的链接应该在所有行下都有下划线。
使用背景方法
有许多不同的方法来给一段文字加下划线。我最终使用的满足所有要求的方法是：使用 CSS 属性background-image。
通过将背景图像定义为从一种颜色过渡到同一种颜色的线性渐变，背景图像可以是纯色。
背景的大小在高度上受到限制，并通过将背景大小分别设置为2px和100%来占用锚元素的整个宽度。
这最后还是覆盖了整个背景，因为现在它反复重复，直到覆盖了整个背景。所以我把background-repeat设置为no-repeat，以此来阻止它重复导致背景被覆盖。
线在锚元素的顶部！在背景位置设置为0的情况下定位它100%将其放置在左边缘，并且100%位于锚元素的上边缘。
公共 HTML 代码：
复制代码
公共 CSS 代码：
复制代码
最简单的下划线实现 CSS 代码：
复制代码
两个背景
要使用和操作多个背景图像，请为background-*属性设置多个值，用逗号分隔。
逗号分隔列表中的第一个条目位于顶部，后面的每个条目后面都有一个图层。
以下锚元素的背景将完全为黑色（#000000）。虽然白色（#ffffffff）背景在那里，但它不可见，因为它被黑色的覆盖了。
代码如下：
复制代码
在下面的例子中，我设置了两个背景。两个都在底部，使一个重叠另一个。
关键 CSS 代码：
复制代码
还未添加个人签名 2020.09.22 加入
还未添加个人简介
评论