ユーザーがリフレッシュするたびに、グラデーションを背景として設定するにはどうすればよいですか？

私は、ブートストラップベースのWebページ上で働いていると私の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+ */ 
}

それは私のページの背景としてグラデーションを適用するには、しかし、私は他の2つの勾配を持っています

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つの勾配のいずれかを適用するので、例えば最初、彼は第二を見てグラデーションを作成し、ページを更新して3番目のグラデーションなどを表示します）。

どうすればこの効果を得ることができますか？

出典

2016-09-14 user3766930

だから、bodyタグ – epascarello

にランダムクラスを追加したり、ちらつきを防止するために、 'サーバーside'でそれを行うためにJavaScriptを追加します。しかし、はい、3つのクラスがそれを行います（*または2つのクラスと '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）を参照してください。 –

ユーザーがリフレッシュするたびに、グラデーションを背景として設定するにはどうすればよいですか？

答えて

関連する問題