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

1. 从

   background

   中删除两个中间渐变。
2. 将

   background-size

   设置为

   50%

   。
3. 将

   transition

   更改为仅包含

   background-position .4s

   和

   color .4s

   。
4. 从

   transition

   ed 规则中删除

   :hover

   属性。

.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%)) 100%;
  background-size: 50%;
  outline-offset: .1em;
  transition: background-position .4s, color .4s;
} 
.bannerbuttonV1:hover {
  --_p: 100%;
  color:#fff;
}

片段：

.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%)) 100%;
  background-size: 50%;
  outline-offset: .1em;
  transition: background-position .4s, color .4s;
}

.bannerbuttonV1:hover {
  --_p: 100%;
  color: #fff;
}

.bannerbutton:active {
  box-shadow: 0 0 9e9q inset #0009;
  background-color: #282828;
  color: #282828;
}

.bannerbutton {
  font-family: arial;
  font-size: 18px;
  cursor: pointer;
  padding: 16px 25px;
  font-weight: bold;
  border: none;
  height: 52px;
  color: #282828;
  background-color: #444;
  width: 150px;
  text-align: center;
  border-radius: 2px
}

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

Answer 2

（原始答案）我编辑了你的代码，并删除了垂直动画：

.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;”这一行， 现在应该可以正常工作了。编辑：我在“transition：background-size .4s”行中添加了一个逗号。没有它，你谈到的那个角落问题就会出现。