5

私はブートストラップ ベースの 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 つのグラデーションのいずれかをランダムに適用したいと考えています (たとえば、最初に 2 番目のグラデーションを表示し、次にページを更新して 3 番目のグラデーションを表示するなど)。

どうすればこの効果を達成できますか?

4

1 に答える 1

4

ページが読み込まれた後、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-14T13:10:44.637 に答える