Как я могу установить различные градиенты в качестве фона, каждый раз, когда пользователь обновляет?

Question

Как я могу установить различные градиенты в качестве фона, каждый раз, когда пользователь обновляет?

Я работаю над загрузочной веб-страницей, и в моем файле 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 градиентов случайным образом, когда пользователь обновляет страницу (например, сначала он видит 2-й градиент, затем он обновляет страницу и видит 3-й градиент и т. д.).

Как я могу добиться этого эффекта?

5

javascript css css3 css-gradients

Источник

user3766930 14 сен '16 в 13:06

1 ответ

Решение

Другие вопросы по тегам javascript css css3 css-gradients

user3853934 14 сен '16 в 13:10 2016-09-14 13:10 · Accepted Answer · 2016-09-14 13:10

После загрузки страницы добавьте случайный класс в <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+ */
}