如何在WordPress中复刻hiibiza网站的渐变动态背景？

核心问题分析 #

你当前的代码是直接切换不同线性渐变，导致过渡生硬；而目标网站的背景是多层径向渐变叠加+柔和色彩流动+细微噪点纹理的组合，需要调整实现思路。

具体改进步骤 #

1. 模拟目标网站的渐变结构

用多层径向渐变分别控制顶部、底部的色彩区域，让边缘过渡更柔和：

background-image: 
  radial-gradient(ellipse 80% 120% at top center, rgba(230, 100, 101, 0.8), transparent 70%),
  radial-gradient(ellipse 80% 120% at bottom center, rgba(77, 159, 12, 0.8), transparent 70%);

2. 实现平滑色彩过渡

不要直接替换background属性，而是通过调整渐变颜色、背景色和位置来实现融合效果，配合ease-in-out动画曲线让过渡更自然：

@keyframes backgroundShift {
  0% {
    background-position: center top, center bottom;
    background-color: rgba(230, 100, 101, 0.1);
  }
  25% {
    background-position: center 10%, center 90%;
    background-color: rgba(255, 154, 158, 0.1);
  }
  50% {
    background-position: center top, center bottom;
    background-color: rgba(201, 75, 75, 0.1);
  }
  75% {
    background-position: center 10%, center 90%;
    background-color: rgba(77, 159, 12, 0.1);
  }
  100% {
    background-position: center top, center bottom;
    background-color: rgba(230, 100, 101, 0.1);
  }
}

3. 添加噪点纹理增强质感

目标网站背景有细微噪点，用内嵌的SVG噪点纹理叠加，提升真实感：

background-image: 
  /* 原有渐变 */
  radial-gradient(...),
  radial-gradient(...),
  /* 噪点纹理 */
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");

完整改进代码 #

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  overflow: hidden;
  /* 多层渐变 + 噪点纹理叠加 */
  background-image: 
    radial-gradient(ellipse 80% 120% at top center, rgba(230, 100, 101, 0.8), transparent 70%),
    radial-gradient(ellipse 80% 120% at bottom center, rgba(77, 159, 12, 0.8), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  background-blend-mode: normal;
  animation: backgroundShift 20s infinite ease-in-out;
}

@keyframes backgroundShift {
  0% {
    background-position: center top, center bottom, center center;
    background-color: rgba(230, 100, 101, 0.1);
  }
  25% {
    background-position: center 10%, center 90%, center center;
    background-color: rgba(255, 154, 158, 0.1);
  }
  50% {
    background-position: center top, center bottom, center center;
    background-color: rgba(201, 75, 75, 0.1);
  }
  75% {
    background-position: center 10%, center 90%, center center;
    background-color: rgba(77, 159, 12, 0.1);
  }
  100% {
    background-position: center top, center bottom, center center;
    background-color: rgba(230, 100, 101, 0.1);
  }
}

进阶方案：用Lottie还原精准效果 #

如果想要1:1复刻目标网站的动态效果，确实可以用Lottie动画：

• 用Figma制作类似的渐变流动动画，导出为Lottie格式
• 在WordPress中安装LottieFiles插件，将动画作为页面背景嵌入
• Lottie能实现比CSS更复杂的色彩流动和形态变化，完全匹配目标效果

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