扫到右边过渡css

Question

我有一个提交按钮，我需要从左到右扫过它的背景：

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

我需要像扫描到正确的过渡之类的东西。所有示例都用于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%;
    }

<input type="text" value="Sweep to the right" />