我可以随机化背景渐变的位置吗？

Question

我的 Squarespace 网站上有这个自定义 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。它给了我这段代码，但没有用

Sure! Here's an updated version of the code that randomizes the initial background position:

/* 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() );
}

Answer 1

它不起作用，因为

Math.random()

是javascript。 CSS 中不存在这样的函数。使用

element.style.setProperty()

在元素本身上设置 css 自定义属性

window.onload = () => {
  const element = document.querySelector('.section-background');
  element.style.setProperty('--rand-x', Math.random());
  element.style.setProperty('--rand-y', Math.random());
}

.section-background {
  background: linear-gradient( 270deg, #8a90f9, #91f2f2, #92f492, #ffb64d, #ff5c5c, #fc92fc);
  background-size: 10000% 10000%;
  height: 95vh;
  animation: AnimationName 60s ease infinite;
}

@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))
  }
}

<div class="section-background"></div>