所有 clientRects 的 CSS 动画答案

【问题标题】：CSS animation for all clientRects所有 clientRects 的 CSS 动画
【发布时间】：2020-11-26 22:46:23
【问题描述】：

我一直在玩 CSS 动画来吸引眼球 - 我发现以下结果非常好：

    body {
        font-size: xx-large;
        font-family: 'Courier New';
        color: white;
        background: black;
    }

    a {
        text-decoration: none;
        position: relative;
    }
    a:visited {
        color: white;
    }

    a::before,
    a::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 50%;
        width: 0;
        border-bottom: 2px solid blue;
        transition: 400ms 200ms;
    }
    a::after {
        left: 50%;
        right: 0;
    }
    a:hover::before,
    a:hover::after {
        width: 50%;
    }

&lt;a href="#"&gt;This is a test. This line has to be a bit longer to see the effect.&lt;/a&gt;

它的问题是它在换行时的行为......这可以修复吗？我已经很高兴了，如果动画只在悬停的 clientRect 上并且一旦完成，所有其他 clientRects 都会得到下划线。一个纯 CSS 的解决方案（如果有的话）将不胜感激。

【问题讨论】：

抱歉，您真正想收到什么？
动画只对第一个clientRect起作用。我把链接文本加长了一点，这样你就可以看到问题了。
没有简单的方法可以在多行文本上执行此操作...唯一要做的就是添加“a { white-space: nowrap; }”如果您确定文本永远不会更宽比容器。
好的，我不能保证。 :-(
谷歌叔叔说...试试这个：nickymeuleman.netlify.app/blog/css-animated-wrapping-underline

标签： css animation line-breaks pseudo-element

【解决方案1】：

我可以通过修改 Nicky Meuleman's example 找到解决方案（感谢 webdev-dan 提供该链接）：

body {
  background-color: black;
  font-size: 3rem;
}

a {
  color: blue;
  text-decoration: none;
  background-image: linear-gradient(blue, blue), linear-gradient(blue, blue);
  background-size: 0 2px, 0 2px;
  background-position: 50% 100%, 50% 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms linear, background-position 400ms linear;
  transition-delay: 200ms;
}
a:hover {
  background-size: 50% 2px, 100% 2px;
  background-position: 0 100%, 50% 100%;
}
a:visited {
  color: white;
}

<a href="#">Short link test.</a>
<a href="#">This link is a bit longer to see the multiline behaviour.</a>

希望这对其他人也有用。 :-)

【讨论】：