ページの更新時にCSSグラデーションをランダムに循環させますか？

Question

ページリロード時にランダムにCSSグラデーションを繰り返すことができるかどうかを確認しようとしています。私は現在、次のCSSグラデーションは、私が使用したいことを定義している

は：

/* Purple */ 
.fp-hero { 
    background: linear-gradient(20deg, #6e48aa 0%, #9d50bb 73%, #b176cc 100%); 
} 

/* Light Blue */ 
.fp-hero { 
    background: linear-gradient(20deg, #1fa2ff 0%, #12d8fa 73%, #a6ffcb 100%); 
} 

/* Green */ 
.fp-hero { 
    background: linear-gradient(20deg, #56ab2f 0%, #a8e063 73%, #dce356 100%); 
} 

/* Tangerine */ 
.fp-hero { 
    background: linear-gradient(20deg, #db5041 0%, #ff7566 73%, #fe8a5b 100%); 
} 

すべてのヘルプやヒントをいただければ幸いです。

Answer 1

私は、あなたが持っているものがなぜ機能していないのかを理解すると思うが、説明する。毎回同じセレクターと同じプロパティを使用しています。後続の各セレクタが最後のセレクタを上書きしているので、常に「タンジェリン」で終わります。

私がやることは、これらのクラスを2番目のクラス名を含むように変更し、そのカラークラス名をページの読み込みにランダムに追加することです。このようにすると、同じページの複数の要素をターゲットにして、それらの要素を一致させることができます。例えば

（それにサイクルを確認するために打つ "ファイル名を指定して実行コードスニペットを" キープ）：出発点として

$(document).ready(function() { 
 
    var colors = [ 
 
     "purple", 
 
     "blue", 
 
     "green", 
 
     "orange" 
 
    ]; 
 
    var randomIndex = Math.floor(Math.random() * colors.length); 
 
    $(".fp-hero").addClass(colors[randomIndex]); 
 
});

/* Purple */ 
 
.fp-hero.purple { 
 
    background: linear-gradient(20deg, #6e48aa 0%, #9d50bb 73%, #b176cc 100%); 
 
} 
 

 
/* Light Blue */ 
 
.fp-hero.blue { 
 
    background: linear-gradient(20deg, #1fa2ff 0%, #12d8fa 73%, #a6ffcb 100%); 
 
} 
 

 
/* Green */ 
 
.fp-hero.green { 
 
    background: linear-gradient(20deg, #56ab2f 0%, #a8e063 73%, #dce356 100%); 
 
} 
 

 
/* Tangerine */ 
 
.fp-hero.orange { 
 
    background: linear-gradient(20deg, #db5041 0%, #ff7566 73%, #fe8a5b 100%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fp-hero"> 
 
    This is my element 
 
</div>

Answer 2

、同じ名前.fp-heroで4つのCSSクラスを持っています。したがって、最後のもの（/* Tangerine */）のバックグラウンドプロパティは、前のプロパティを上書きします。

私はあなたを正しく理解していれば、.fp-hero-purple, .fp-hero-light-blueのような異なる名前を付けることをお勧めします。次に、ターゲット要素cssクラスをjavascriptで設定し、必要に応じて他のクラスに変更することができます。 https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

編集：キーフレームは、ランダム性のために動作しませんので、申し訳ありませんが、私は、「ランダム」の部分を逃した

JavaScriptを使用したくない場合は、キーフレームを見ています。私はあなたがちょうど異なる勾配をループしたいと思った。