向右扫一扫css
Sweep to the right transition css
我有一个提交按钮,我需要从左到右扫过它的背景:
<input type="submit" value="Send Request" class="sweep">
我需要 sweep to the right transition 这样的东西。所有示例均适用于 button 、 a 、 li 和 Div 标签。
您可以尝试制作 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" />
我有一个提交按钮,我需要从左到右扫过它的背景:
<input type="submit" value="Send Request" class="sweep">
我需要 sweep to the right transition 这样的东西。所有示例均适用于 button 、 a 、 li 和 Div 标签。
您可以尝试制作 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" />