html - ランダムに色を変える

Question

段落またはdivがあります。

HTML

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

このコードは

しかし、CSSを使用したこのタイプの出力は任意のアイデアが必要です

ありがとう

Answer 1

本当にランダムな純粋な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。

Answer 2

最初の単語ではなくスタイルを設定する直接疑似クラスがある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
}

デモ

Answer 3

純粋なCSSは不可能です。この機能をコーディングするには、Javascriptを使用する必要があります。おそらく始めるのに役立つリンクは次のとおりです：http：//paulirish.com/2009/random-hex-color-code-snippets/

Answer 4

以下のcssがそれを行います。

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