如何在Squarespace网站实现背景渐变位置页面刷新随机化？

我在Squarespace网站上使用自定义CSS创建并动画化背景渐变，希望修改代码让每次刷新页面时渐变的位置随机化，但ChatGPT提供的代码无法正常工作。

原CSS代码 #

/* Gradient animation */
#collection-631373335b5554367a6d6496, #collection-6315119bb4eaa941a0aa617e, #collection-631518729bf3e53d3de5c632, #collection-63151986700b2b4827241df9, #collection-63151bde5812ae629c05151f, #collection-63151a542c7e4f20c67c6aec, #collection-63151b4e3efb9c1fd9c951f2, #collection-631520e2a99294780df99008, #collection-631521a03ecc7346d794bb07, #collection-63152145f7e82b5663fa3d42, #collection-6315243f7a90bc4192a371f2, #collection-631a6f149c23b71200e5d6ce, #collection-6323c23428c02c6f61ce014a, #collection-63a07f0407c73f305d336cb3, #collection-640761a352606c4720ae27d0, #collection-64298618ce9c9a50c8263f71 {  

  .section-background {
    background: linear-gradient(270deg, #8A90F9, #91F2F2, #92F492, #FFB64D, #FF5C5C, #FC92FC);
    background-size: 10000% 10000%;

    -webkit-animation: AnimationName 60s ease infinite;
    -moz-animation: AnimationName 60s ease infinite;
    animation: AnimationName 60s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

ChatGPT提供的无效代码 #

/* Gradient animation */
#collection-631373335b5554367a6d6496, #collection-6315119bb4eaa941a0aa617e, #collection-631518729bf3e53d3de5c632, #collection-63151986700b2b4827241df9, #collection-63151bde5812ae629c05151f, #collection-63151a542c7e4f20c67c6aec, #collection-63151b4e3efb9c1fd9c951f2, #collection-631520e2a99294780df99008, #collection-631521a03ecc7346d794bb07, #collection-63152145f7e82b5663fa3d42, #collection-6315243f7a90bc4192a371f2, #collection-631a6f149c23b71200e5d6ce, #collection-6323c23428c02c6f61ce014a, #collection-63a07f0407c73f305d336cb3, #collection-640761a352606c4720ae27d0, #collection-64298618ce9c9a50c8263f71 {

.section-background {
background: linear-gradient(270deg, #8A90F9, #91F2F2, #92F492, #FFB64D, #FF5C5C, #FC92FC);
background-size: 10000% 10000%;
background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y));

-webkit-animation: AnimationName 60s ease infinite;
-moz-animation: AnimationName 60s ease infinite;
animation: AnimationName 60s ease infinite;
}

@-webkit-keyframes AnimationName {
0%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
50%{background-position: calc(100% * var(--rand-x) - 100%) calc(100% * var(--rand-y))}
100%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
}
@-moz-keyframes AnimationName {
0%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
50%{background-position: calc(100% * var(--rand-x) - 100%) calc(100% * var(--rand-y))}
100%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
}
@keyframes AnimationName {
0%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
50%{background-position: calc(100% * var(--rand-x) - 100%) calc(100% * var(--rand-y))}
100%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
}
}

/* Randomize background position */
.section-background {
--rand-x: calc( Math.random() );
--rand-y: calc( Math.random() );
}

问题分析 #

ChatGPT的代码失效原因是CSS无法直接执行JavaScript函数：calc()仅支持CSS内部的运算逻辑，不能调用Math.random()这类JS方法，因此--rand-x和--rand-y变量无法获取随机值。

解决方案 #

需要结合JavaScript生成随机值并注入到CSS变量中，再配合CSS动画实现需求。

完整代码 #

1. CSS部分（替换原自定义CSS）

/* Gradient animation */
#collection-631373335b5554367a6d6496, #collection-6315119bb4eaa941a0aa617e, #collection-631518729bf3e53d3de5c632, #collection-63151986700b2b4827241df9, #collection-63151bde5812ae629c05151f, #collection-63151a542c7e4f20c67c6aec, #collection-63151b4e3efb9c1fd9c951f2, #collection-631520e2a99294780df99008, #collection-631521a03ecc7346d794bb07, #collection-63152145f7e82b5663fa3d42, #collection-6315243f7a90bc4192a371f2, #collection-631a6f149c23b71200e5d6ce, #collection-6323c23428c02c6f61ce014a, #collection-63a07f0407c73f305d336cb3, #collection-640761a352606c4720ae27d0, #collection-64298618ce9c9a50c8263f71 {  
  .section-background {
    background: linear-gradient(270deg, #8A90F9, #91F2F2, #92F492, #FFB64D, #FF5C5C, #FC92FC);
    background-size: 10000% 10000%;
    /* 使用CSS变量设置初始位置 */
    background-position: var(--start-x) var(--start-y);
    
    -webkit-animation: AnimationName 60s ease infinite;
    -moz-animation: AnimationName 60s ease infinite;
    animation: AnimationName 60s ease infinite;
  }
}

@-webkit-keyframes AnimationName {
  0%{background-position: var(--start-x) var(--start-y)}
  50%{background-position: calc(var(--start-x) + 100%) var(--start-y)}
  100%{background-position: var(--start-x) var(--start-y)}
}
@-moz-keyframes AnimationName {
  0%{background-position: var(--start-x) var(--start-y)}
  50%{background-position: calc(var(--start-x) + 100%) var(--start-y)}
  100%{background-position: var(--start-x) var(--start-y)}
}
@keyframes AnimationName { 
  0%{background-position: var(--start-x) var(--start-y)}
  50%{background-position: calc(var(--start-x) + 100%) var(--start-y)}
  100%{background-position: var(--start-x) var(--start-y)}
}

2. JavaScript部分（注入到页面）

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有目标.section-background元素
  const sections = document.querySelectorAll('#collection-631373335b5554367a6d6496 .section-background, #collection-6315119bb4eaa941a0aa617e .section-background, #collection-631518729bf3e53d3de5c632 .section-background, #collection-63151986700b2b4827241df9 .section-background, #collection-63151bde5812ae629c05151f .section-background, #collection-63151a542c7e4f20c67c6aec .section-background, #collection-63151b4e3efb9c1fd9c951f2 .section-background, #collection-631520e2a99294780df99008 .section-background, #collection-631521a03ecc7346d794bb07 .section-background, #collection-63152145f7e82b5663fa3d42 .section-background, #collection-6315243f7a90bc4192a371f2 .section-background, #collection-631a6f149c23b71200e5d6ce .section-background, #collection-6323c23428c02c6f61ce014a .section-background, #collection-63a07f0407c73f305d336cb3 .section-background, #collection-640761a352606c4720ae27d0 .section-background, #collection-64298618ce9c9a50c8263f71 .section-background');
  
  sections.forEach(section => {
    // 生成0%到100%之间的随机初始位置
    const randomX = `${Math.floor(Math.random() * 101)}%`;
    const randomY = `${Math.floor(Math.random() * 101)}%`;
    
    // 为元素设置CSS变量
    section.style.setProperty('--start-x', randomX);
    section.style.setProperty('--start-y', randomY);
  });
});

在Squarespace中添加代码的步骤 #

1. 将CSS代码粘贴到网站设置 > 高级 > 自定义CSS区域
2. 将JavaScript代码粘贴到网站设置 > 高级 > 代码注入 > 页脚区域
3. 保存设置并刷新页面，即可看到随机初始位置的渐变动画

内容的提问来源于stack exchange，提问作者Elvar S. Júlússon