jQuery实现多背景图中行星的上下浮动动画效果问题

你遇到的问题很常见——jQuery默认不支持backgroundPosition的动画（尤其是多背景场景），直接用.css()切换位置会因为没有过渡效果导致闪烁，而直接写.animate({backgroundPosition: ...})自然也不会生效。下面给你两个靠谱的解决方案，优先推荐CSS动画，性能更好也更简洁。

方案一：CSS @keyframes 动画（最推荐） #

CSS原生动画对多背景的支持非常友好，不需要依赖任何JS，还能保证流畅的过渡效果，完全不会出现闪烁问题。

实现步骤： #

1. 保留你原来的背景样式，给目标元素添加动画属性
2. 定义关键帧，指定行星在动画周期内的位置变化

/* 你的原始背景样式 */
.header {
  background-image: url(../img/Icons/about-stars-bg2.svg), url(../img/about-planet-1.svg), url(../img/about-planet-2.svg), url(../img/about-planet-3.svg);
  background-position: top 5px center, -115px 200px, left 1055px top 450px, right -45px top 350px;
  background-repeat: no-repeat;
  background-size: auto, auto, auto, 100px;
  /* 添加动画：名称、时长、缓动效果、无限循环 */
  animation: floatPlanets 2s ease-in-out infinite;
}

/* 定义浮动动画的关键帧 */
@keyframes floatPlanets {
  /* 初始和结束位置（和原始位置一致） */
  0%, 100% {
    background-position: top 5px center, -115px 200px, left 1055px top 450px, right -45px top 350px;
  }
  /* 中间位置（行星向上偏移20px，你可以根据需求调整数值） */
  50% {
    background-position: top 5px center, -115px 180px, left 1055px top 430px, right -45px top 330px;
  }
}

这样写完，浏览器会自动帮你处理平滑的上下浮动，完全不需要JS代码，效果还更稳定。

方案二：jQuery手动处理多背景位置（适合必须用JS的场景） #

如果因为某些原因必须用jQuery实现，核心是要拆分多背景的位置值，单独修改每个行星的位置，同时用CSS过渡来实现平滑效果，而不是依赖jQuery的.animate()。

代码示例： #

$(document).ready(function() {
  // 先保存每个背景的初始位置，避免每次解析字符串出错
  const initialBgPositions = [
    'top 5px center',       // 星星背景（不浮动）
    '-115px 200px',         // 行星1
    'left 1055px top 450px',// 行星2
    'right -45px top 350px' // 行星3
  ];
  const floatOffset = -20; // 向上浮动的偏移量（可调整）
  let isMovingUp = true;   // 标记当前浮动方向

  setInterval(function() {
    // 计算每个背景的新位置
    const newBgPositions = initialBgPositions.map((pos, index) => {
      if (index === 0) return pos; // 跳过星星背景

      // 拆分位置字符串，找到Y轴数值
      const positionParts = pos.split(' ');
      const yAxisValue = parseInt(positionParts.find(part => part.includes('px')));
      // 根据浮动方向计算新的Y值
      const newY = isMovingUp ? yAxisValue + floatOffset : yAxisValue;

      // 替换原来的Y值，重组位置字符串
      return positionParts.map(part => part.includes('px') ? `${newY}px` : part).join(' ');
    });

    // 应用新的背景位置，同时添加过渡效果
    $('.header').css({
      'transition': 'background-position 1s ease-in-out',
      'background-position': newBgPositions.join(', ')
    });

    // 切换下一次的浮动方向
    isMovingUp = !isMovingUp;
  }, 2000);
});

为什么你的原有代码失效？ #

• 直接用.css()切换位置没有过渡效果，会瞬间跳变，所以看起来闪烁
• jQuery的.animate()不支持多背景的backgroundPosition语法，而且原生jQuery本身就没有内置这个属性的动画支持（不需要额外插件，用上面的方法就足够）

内容的提问来源于stack exchange，提问作者IkePr