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

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

Как достичь этого эффекта?

источник

2016-09-14 user3766930

Так добавить JavaScript, чтобы добавить случайный класс тела тега – epascarello

Или делать это на 'серверном side' для предотвращения мерцания. Но да, три класса сделают это (* или два класса и один по умолчанию на 'body' *). – eisbehr

После загрузки страницы добавьте случайный класс к элементу <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-14 13:10:44

Чтобы убедиться, что мерцание не так уж плохо, установите значение по умолчанию на '# FFF' в качестве фона и примените переход 0.1s linear (или что вам угодно). Дает ему плавный эффект. – Roberrrt

@ Roberrrt Можете ли вы показать мне, как это сделать? это звучит разумно для меня ... – user3766930

@ user3766930 Я не думаю, что это возможно, см. [Использование переходов CSS3 с градиентными фонами] (http://stackoverflow.com/q/6542212/3853934). –

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

ответ

Смежные вопросы