【问题标题】:css background position animation infinityCSS背景位置动画无限
【发布时间】:2019-12-07 23:28:49
【问题描述】:

如何在按钮上添加类似进度条的动画?

loading 类被添加到按钮时,背景位置应该在无限循环中向右移动。就像加载进度条一样

这里的问题是位置移动的速度不同

代码

<button class="loading">Loooong text on button</button><br><br>
<button class="loading">Short</button>

@keyframes animation_loading {
    from { background-position: 0 0; }
    to { background-position: 25px 0; }
}

button.loading {
    background-image:url(//www.dynaccount.com/tmp.png);
    animation:animation_loading 0.5s linear infinite;
}

小提琴

http://jsfiddle.net/KP2W4/

【问题讨论】:

  • 你能做一个小提琴吗?您也可以使用进度元素。

标签: css animation


【解决方案1】:

您只需要一个关键帧动画,它可以像这样在 x 轴上移动背景图像:

@keyframes loading{
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

jsFiddle

【讨论】:

  • 你应该尝试添加一般属性,而不是使用专有标签,因为你的答案是正确的,但小提琴在 Firefox 中失败,修复,我会支持你:)
  • 已经更新了我的问题..这里的问题是不同宽度的元素节奏不同
  • 找到了解决方案..谢谢..只需将图像宽度而不是 100%
猜你喜欢
  • 2012-02-09
  • 1970-01-01
  • 2011-05-03
  • 1970-01-01
  • 2023-03-14
  • 1970-01-01
  • 2010-12-18
  • 1970-01-01
  • 2021-03-11
相关资源
最近更新 更多