html – 如何在没有动画中断的情况下连续水平滚动背景图像？

发布时间：2020-12-14 16:34:42 所属栏目：资源来源：网络整理

导读：我正在尝试用 css3动画创建一个横向无限滚动的横幅.问题是,在动画结束后,它在重新启动时会有严重的削减.我正在试图弄清楚如何防止这种苛刻的动画. 我把我的代码放在这里. @keyframes slideleft {from{background-position: right;}to {background-position:

我正在尝试用 css3动画创建一个横向无限滚动的横幅.问题是,在动画结束后,它在重新启动时会有严重的削减.我正在试图弄清楚如何防止这种苛刻的动画.

我把我的代码放在这里.

@keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}

@-webkit-keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}

#masthead {
background-image: url('http://static.communitytable.parade.com/wp-content/uploads/2014/06/dogs-in-world-cup-jerseys-ftr.jpg');
animation: slideleft 5s infinite ease-in-out;
-webkit-animation: slideleft 5s infinite ease-in-out;
width: 100%;
height: 1200px;
}

<div id="masthead"></div>

解决方法

Javascript可能是一个更好的方法来处理这个问题.虽然在CSS中,您可以重复背景图像并将背景位置和动画持续时间扩展到非常高的数字.这是一个 fiddle.

@keyframes slideleft {
  from { background-position: 0%; }
  to { background-position: 90000%; }
}

#masthead {
  background-repeat: repeat-x;
  ...
  animation: slideleft 600s infinite linear;
}

如果您使用的是jQuery,那将非常简单：

(function animateBG() {
    $('#masthead').animate({
        backgroundPosition: '+=5'
    },12,animateBG);
})();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!