每次用戶刷新時，如何設置不同的漸變作爲背景？

我工作的一個基於網頁的引導，在我的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個梯度的一個隨機當用戶刷新頁面（例如，使第一，他認爲第二漸變，然後他刷新頁面並看到第三個漸變等）。

我該如何達到這個效果？

來源

2016-09-14 user3766930

所以添加JavaScript來隨機類附加到body標籤 – epascarello

或做它'服務器side'防止閃爍。但是，是的，三個類將做到這一點（*或兩個類，一個默認''body' *）。 – eisbehr

加載頁面後，使用JavaScript爲<body>元素添加一個隨機類，併爲不同的類指定不同的梯度。

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線性（或任何你喜歡的）的轉換。給它一個平滑的效果。 – Roberrrt

@Roberrrt你能告訴我該怎麼做嗎？這聽起來很合理... – user3766930

@ user3766930我不認爲這是可能的，請參閱[使用漸變背景使用CSS3轉換]（http://stackoverflow.com/q/6542212/3853934）。 –

每次用戶刷新時，如何設置不同的漸變作爲背景？

回答

相關問題