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"));
});

JSF中。

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>