css背景不间断位移

CSS中有一种很常用的技术就是背景不间断位移。这是什么意思呢？我们可以用一个例子来说明。

假设我们有一个div，需要让它的背景无限滚动，该怎么做呢？我们可以用CSS3中的“动画”和“无限循环”来完成。

/*首先，定义一个keyframes，来表示我们需要做的动画*/
@keyframes scroll {
  
  0% {
  
   
   background-position: 0 0;
  
}
  
  100% {
  
   
   background-position: -200px 0;
  
}
}
/*接着，在div的样式里使用animation来调用这个动画，并设置它的循环次数为无限*/
div {
  
  background: url(background.jpg) 0 0 repeat-x;
  
  animation: scroll 2s linear infinite;
}
 

以上代码的意思是：我们定义了一个keyframes，把div背景从0px移动到-200px，然后设置了动画执行2秒钟，执行方式为线性，循环次数为无限。

注意：这里的background-position是相对于div的左上角进行计算的。repeat-x表示背景在水平方向上无限重复。

以上就是CSS背景不间断位移的示例和代码。有了这个技术，我们可以轻松地实现象赛车游戏中地图滚动一样的效果。