CSS 动画按钮背景 - 如何使该背景水平移动而不是垂直移动

Question

我有一个带有动画悬停效果的按钮，背景会一起滑动，然后当鼠标离开时，它会垂直分割并移动到顶部/底部。我不知道如何获得它，以便当鼠标离开背景时，背景会反转，并且两半回到侧面而不是顶部和底部？

这是驱动它的 CSS：

.bannerbuttonV1 {
  --cblack: #282828; /* the color*/
  --_p: 0%;
  box-shadow: 0 0 0 .1em inset var(--cblack); 
  --_g: linear-gradient(var(--cblack) 0 0) no-repeat;
  background: 
    var(--_g) calc(var(--_p,0%) - 100%) 0%,
    var(--_g) calc(200% - var(--_p,0%)) 0%,
    var(--_g) calc(var(--_p,0%) - 100%) 100%,
    var(--_g) calc(200% - var(--_p,0%)) 100%;
  background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
  outline-offset: .1em;
  transition: background-size .4s, background-position 0s .4s, color .4s;
} 
.bannerbuttonV1:hover {
  --_p: 100%;
  color:#fff;
  transition: background-position .4s, background-size 0s;
}

这是一个例子： https://codepen.io/Mark-Edlington/pen/JjVWVWB

我在网上找到了这段代码，并对其进行了一些修改，如果有人知道更好的方法来实现这一目标，那么我会洗耳恭听。我确定我只需要使用 2 条背景线而不是 4 条，但它是初始设置的，以便背景的 4 个四分之一移到 4 个角。

谢谢

Answer 1

我编辑了你的代码，并删除了垂直动画：

.bannerbuttonV1 {
  --cblack: #282828; /* the color*/
  --_p: 0%;
  box-shadow: 0 0 0 .1em inset var(--cblack); 
  --_g: linear-gradient(var(--cblack) 0 0) no-repeat;
  background: 
    var(--_g) calc(var(--_p,0%) - 100%) 0%,
    var(--_g) calc(200% - var(--_p,0%)) 0%,
    var(--_g) calc(var(--_p,0%) - 100%) 100%,
    var(--_g) calc(200% - var(--_p,0%)) 100%;
  background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
  outline-offset: .1em;
  transition: background-size .4s, 
} 
.bannerbuttonV1:hover {
  --_p: 100%;
  color:#fff;
  transition: background-position .4s, background-size 0s;
}

<div class='bannerbutton bannerbuttonV1'>
    shop now
</div>

您需要删除“background-position 0s .4s, color .4s;”这一行， 现在应该可以正常工作了。