Question

我试图查看是否可以在页面重新加载时随机循环CSS渐变。

我目前定义了以下我想要使用的CSS渐变：

/* Purple */
.fp-hero {
    background: linear-gradient(20deg, #6e48aa 0%, #9d50bb 73%, #b176cc 100%);
}

/* Light Blue */
.fp-hero {
    background: linear-gradient(20deg, #1fa2ff 0%, #12d8fa 73%, #a6ffcb 100%);
}

/* Green */
.fp-hero {
    background: linear-gradient(20deg, #56ab2f 0%, #a8e063 73%, #dce356 100%);
}

/* Tangerine */
.fp-hero {
    background: linear-gradient(20deg, #db5041 0%, #ff7566 73%, #fe8a5b 100%);
}

任何帮助或提示都将不胜感激。

Answer 1

我想你明白为什么你所拥有的不是工作，而是要解释。您每次都使用相同的选择器和相同的属性。所以每个后续的选择器都会覆盖最后一个，所以你总是以＃34; Tangerine＆＃34;结束。

我要做的是将这些类更改为包含第二个类名，然后在页面加载时随机添加该颜色类名。这样做可以让你在同一页面上定位多个元素并使它们匹配。

例如（继续点击＆＃34;运行代码片段＆＃34;看它循环）：

＆＃13;

$( document ).ready(function() {
    var colors = [
      "purple",
      "blue",
      "green",
      "orange"
    ];
    var randomIndex = Math.floor(Math.random() * colors.length);
    $(".fp-hero").addClass(colors[randomIndex]);
});

＆＃13;

/* Purple */
.fp-hero.purple {
    background: linear-gradient(20deg, #6e48aa 0%, #9d50bb 73%, #b176cc 100%);
}

/* Light Blue */
.fp-hero.blue {
    background: linear-gradient(20deg, #1fa2ff 0%, #12d8fa 73%, #a6ffcb 100%);
}

/* Green */
.fp-hero.green {
    background: linear-gradient(20deg, #56ab2f 0%, #a8e063 73%, #dce356 100%);
}

/* Tangerine */
.fp-hero.orange {
    background: linear-gradient(20deg, #db5041 0%, #ff7566 73%, #fe8a5b 100%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fp-hero">
  This is my element
</div>

＆＃13;

Answer 2

作为起点，您有4个同名.fp-hero的css类。所以最后一个（/* Tangerine */）背景属性会覆盖以前的属性。

如果我理解正确，我会建议给他们不同的名字，如.fp-hero-purple, .fp-hero-light-blue等。然后，您可以使用javascript设置目标元素css类，并在需要时更改为其他类。

如果您不想使用javascript，请查看关键帧：https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

编辑：抱歉，我错过了“随机”部分，因此关键帧不适用于随机性。我以为你只想循环不同的渐变。

在页面刷新时随机循环CSS渐变？

2 个答案: