带有幻灯片动画的按钮上的边框出血

Question

问题

我正在尝试创建一个带有滑动动画的按钮。该按钮有一个

border-radius

，并使用伪元素来实现效果。

这是标记：

<div role="button" class="is-style-rt-primary-accent-button">
  <a class="rt-button__link" data-text="HELLO WORLD" href="#" target="_self" rel="noopener">
    HELLO WORLD
    <div class="rt-button">
      <div class="rt-button__circle">
        <div class="rt-button__arrow">
          <span class="rt-button__line"></span>
            <span class="rt-button__pointer"></span>
        </div>
      </div>
    </div>
  </a>
</div>

以下是款式：

.is-style-rt-primary-accent-button {
    .rt-button__link {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        background: none;
        font-weight: 700;
        padding: 14px 31px;
        position: relative;
        font-size: 14px;
        line-height: 28px;
        overflow: hidden;
        transition: 0.3s ease-in-out;
        text-transform: uppercase;
        border-radius: 64px;
        z-index: 1;
        color: var(--wp--preset--color--accent-1);
        text-decoration: none;

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 64px;
            background: var(--wp--preset--color--accent-6);
            transition: 0.3s ease-in-out;
            z-index: -2;
        }

        &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            border-radius: 64px;
            background: var(--wp--preset--color--secondary);
            transition: 0.3s ease-in-out;
            z-index: -1;
        }

        &:hover {
            color: var(--wp--preset--color--accent-6);

            .rt-button__line {
                background: var(--wp--preset--color--accent-6);
            }

            .rt-button__pointer {
                border-left: 0.3125rem solid var(--wp--preset--color--accent-6);
            }

            .rt-button__arrow {
                transform: translateX(10px);
            }

            &::before {
                transform: translateX(100%);
            }
        }
    }

    .rt-button__circle {
        @media screen and (max-width: 768px) {
            background: none;
        }
    }

    .rt-button__arrow {
        display: flex;
        align-items: center;
        margin-left: 1rem;
        transition: transform 0.3s ease-in-out;
    }

    .rt-button__line {
        display: inline-block;
        width: 0.625rem;
        height: 0.125rem;
        vertical-align: middle;
        background: var(--wp--preset--color--accent-1);
    }

    .rt-button__pointer {
        width: 0;
        height: 0;
        border-top: 0.3125rem solid transparent;
        border-bottom: 0.3125rem solid transparent;
        border-left: 0.3125rem solid var(--wp--preset--color--accent-1);
    }
}

这是动画速度减慢至 25% 的问题的记录。请注意，在 X 边界处有出血。

我尝试过的事情

1. 我尝试过使用 z-index 和边框。血还在持续。
2. 使用 div 而不是伪元素来处理背景动画。
3. 使用

   box-shadow

   ，但由于动画不同，我没有进一步追求该选项。
4. 悬停时缩放前景（黑色层）。

Answer 1

这是 CSS 的一个常见错误，每当将两个带有

background-color

和相同

border-radius

的元素堆叠在一起时，不幸的是，我还没有看到任何明确的方法来解决这个问题（尽管有一些技巧）我已经看到了解决方案的方法）。 Stack Overflow 上针对同一问题有许多不同的迭代。我希望

background-clip

最终能够解决这个问题（或者也许我们可以让浏览器开箱即用），但是 caniuse.com 特别列出了

background-clip

有关堆叠行为的错误。

幸运的是，您的用例使事情变得更加容易，因为背景颜色与按钮颜色相同，因此您不需要在具有边框半径的同一元素上使用隐藏的溢出。一点技巧让我们像素不完美的怪物看起来很优雅。

这是实现了我的解决方案的代码的最小可重现版本：

body {
    background-color:rgb(22, 22, 22);
    padding: 100px;
}

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: rgb(234, 60, 161);
    text-decoration: none;
    width: 200px;
    height: 50px;
    border-radius: 999px;
}

.cover-element {
    position: absolute;
    background-color:rgb(22, 22, 22);
    width: 206px;
    height: 50px;
    border-radius: 999px;
    top: 0;
    left: -240px;
    transition: all .5s;
}

.btn:hover > .cover-element {
    left: -3px;
}

<div style="width: 200px; height: 50px; overflow: hidden;">
    <a href="#" class="btn">
        HELLO WORLD
        <div class="cover-element "></div>
    </a>
</div>

它的工作原理是使伪元素每侧宽 3px，并使用溢出：隐藏外部 div。如果您更改主体的背景颜色，您会看到魔法消失，并意识到这仅适用于您的特定用例。

我没有在解决方案中包含额外的元素，但您应该能够按原样实现它。