随机改变颜色

Question

我有一个段落或div。

HTML

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

此代码将显示

但我希望这种类型的输出使用CSS任何想法

谢谢

Answer 1

你不能用真正随机的纯CSS做到这一点，你需要一些JavaScript。我创建了一个使用jQuery＆amp; amp;每次重新加载页面时都会生成不同的颜色。

<强> 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
}

<强> DEMO

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>