隨機更改顏色

我有一個段落或div。隨機更改顏色

HTML

<p style="color:red;">Change color randomly</p>

該代碼會顯示

enter image description here

，但我使用CSS的任何想法

enter image description here

感謝

0123希望這種類型的輸出

來源

2013-02-28 Pawan Lakhara

您可以在兩者之間添加span標籤，然後添加css顏色屬性 – EnterJQ 2013-02-28 07:26:24

根據計時器，每個字母是不同的顏色還是隨機的顏色？ – 2013-02-28 07:26:41

這就是你想要的。 http://stackoverflow.com/questions/13671039/random-coloured-words-in-a-h1 – 2013-02-28 07:28:26

你不能用純CSS做到這一點，它真的是隨機的，你需要一些JavaScript。我創建了一個小示例，它也使用jQuery &它每次重新加載頁面時都會生成不同的顏色。

HTML

<p>Change color randomly</p>

的JavaScript

// Define some colours 
var colours = [ 
    "red", 
    "orange", 
    "yellow", 
    "green", 
    "blue", 
    "purple"  
]; 

// Retrieve the words 
var text = $("p").html().split(" "); 

// Empty the elment 
$("p").empty(); 

// Iterate over the words 
$.each(text, function(i, word) { 
    if(i != text.length) { 
     word += " "; // Add space after word 
    } 

    // Get random color 
    var colourIndex = Math.floor(Math.random() * colours.length); 

    $("<span>") 
     .html(word) 
     .css("color", colours[colourIndex]) 
     .appendTo($("p")); 
});

JSFiddle。

來源

2013-02-28 07:37:02 MarcoK

我覺得這很好去 – Sowmya 2013-02-28 07:38:11

謝謝我將使用JavaScript。 – 2013-02-28 07:39:57

這裏有一點[腳本更新]（http://jsfiddle.net/mmHpt/1/），它使用隨機的十六進制顏色代碼片段** Victor **建議，所以你沒有一個固定的顏色數組它會是隨機的。 – MarcoK 2013-02-28 07:40:17

下面的CSS將做到這一點。

<p style="color:red;"><span style="color:#909">Change</span> color <span style="color:blue">randomly</span></p>

來源

2013-02-28 07:27:08 Aratidgr8

有直接的僞類樣式化first-letter但不是第一個字，所以你需要添加任何內聯元素得到它的風格。

使用nth-child與span標籤

<p style="color:red;"><span>Change</span> color <span>randomly</span></p> 

span:nth-child(1){ 
    color:green 
} 
span:nth-child(2){ 
    color:violet 
}

DEMO

來源

2013-02-28 07:27:30 Sowmya

純CSS是不可能的。您將不得不使用Javascript來編寫此功能。這裏有一個鏈接可能幫助你開始：http://paulirish.com/2009/random-hex-color-code-snippets/

來源

2013-02-28 07:27:53 Victor

隨機更改顏色

回答

相關問題