我正在尝试创建一个带有滑动动画的按钮。该按钮有一个
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 边界处有出血。
box-shadow
,但由于动画不同,我没有进一步追求该选项。这是 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。如果您更改主体的背景颜色,您会看到魔法消失,并意识到这仅适用于您的特定用例。
我没有在解决方案中包含额外的元素,但您应该能够按原样实现它。