頁面刷新時隨機循環CSS漸變？

我想看看是否有可能在頁面重新加載時隨機循環CSS漸變。頁面刷新時隨機循環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%); 
}

任何幫助或建議，將不勝感激。

來源

2017-08-08 Syrehn

那麼你在找什麼？ –

我認爲這很清楚@ Mr.Alien – Don

@Don他想要循環漸變，他期望只用CSS來完成它嗎？因爲我沒有看到任何JS，如果他已經嘗試 –

我想你明白你爲什麼沒有工作，只能解釋。每次使用相同的選擇器和相同的屬性。所以每個後續的選擇器都會覆蓋最後一個，所以你總是會以「橘子」結束。

我會做的是改變這些類包括第二類名稱，然後在頁面加載隨機添加該顏色類名稱。這樣做可以讓您在同一頁面上定位多個元素並讓它們匹配。

例如（不停的按「運行代碼片段」可以看到週期）：

$(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>

來源

2017-08-08 17:27:11 Don

謝謝唐，我會給這個測試。對不起，如果我的CSS片段不清楚。我的網站上有其他漸變顏色註釋，因此它們不會互相覆蓋。我只是不確定如何去採取那些確切的漸變和循環通過jQuery。建議爲顏色添加額外的類並將它們用作變量很有意義。 – Syrehn

酷，我甚至使我的原始帖子更容易一點，只需要將顏色字符串添加到數組，並從那裏隨機選擇一個。 – Don

工作就像一個魅力。謝謝，我真的很感激。 :) – Syrehn

作爲一個起點，你有4 CSS類具有相同名稱的.fp-hero。所以最後一個（/* Tangerine */）背景屬性覆蓋了以前的屬性。

如果我理解正確，我會建議給他們不同的名字，如.fp-hero-purple, .fp-hero-light-blue等等。然後，您可以使用JavaScript設置您的目標元素CSS類，並在需要時更改爲其他類。

如果你不想使用JavaScript來看看關鍵幀：https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

編輯：對不起，我錯過了「隨機」的一部分，所以關鍵幀將不會爲隨機性工作。我以爲你只是想循環不同的漸變。

來源

2017-08-08 17:28:04 ihpar

你能詳細說明關鍵幀嗎？我不明白他們如何導致隨機選擇。 – Don

@keyframes（[found that]（https://codepen.io/beben-koben/pen/iCIna））沒有任何關於它的隨機內容。它只是循環所有的顏色 – Ivan

對不起，我錯過了「隨機」部分。是的，通過關鍵幀，您可以循環訪問屬性而不會產生隨機性。對不起。 – ihpar

頁面刷新時隨機循環CSS漸變？

回答

相關問題