扫到正确的过渡CSS

Question

我有一个提交按钮，需要从左向右扫动背景：

<input type="submit" value="Send Request" class="sweep">

我需要类似sweep to the right transition的东西。所有示例均用于 button，a，li和Div 标签。

Answer 1

您可以尝试为background-size属性设置动画以模拟这种效果

input {
  padding: .75em;
  border: 1px #ddd solid;
  background: linear-gradient(to right, #eee, #eee);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 1s 0s;
}

input:hover {
  background-size: 100% 100%;
}

  

codepen demo