5

我正在开发基于引导程序的网页，在我的 CSS 文件中，我有以下代码：

body {
  height: 100%;
  background: #3a7bd5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #3a7bd5 , #3a6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

它将渐变作为背景应用到我的页面，但是我还有另外两个渐变：

background: #114357; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #114357 , #F29492); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #114357 , #F29492); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

和

background: #eacda3; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

现在我想在用户刷新页面时随机应用这 3 个渐变中的一个（例如，首先他看到第二个渐变，然后他刷新页面并看到第三个渐变，等等）。

我怎样才能达到这个效果？

4

1 回答 1

4

页面加载后，<body>使用 JavaScript 为元素添加一个随机类，并为不同的类分配不同的渐变。

document.body.classList.add('gradient' + [1, 2, 3][Math.floor(Math.random() * 3)])
body {
  height: 100%;
}
body.gradient1 {
  background: #3a7bd5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #3a7bd5 , #3a6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
body.gradient2 {
  background: #114357; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #114357 , #F29492); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #114357 , #F29492); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
body.gradient3 {
  background: #eacda3; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

于 2016-09-14T13:10:44.637 回答