我有一個段落或div。隨機更改顏色
HTML
<p style="color:red;">Change color randomly</p>
該代碼會顯示
,但我使用CSS的任何想法
感謝
0123希望這種類型的輸出我有一個段落或div。隨機更改顏色
HTML
<p style="color:red;">Change color randomly</p>
該代碼會顯示
,但我使用CSS的任何想法
感謝
0123希望這種類型的輸出你不能用純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"));
});
下面的CSS將做到這一點。
<p style="color:red;"><span style="color:#909">Change</span> color <span style="color:blue">randomly</span></p>
有直接的僞類樣式化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
}
純CSS是不可能的。您將不得不使用Javascript來編寫此功能。這裏有一個鏈接可能幫助你開始:http://paulirish.com/2009/random-hex-color-code-snippets/
您可以在兩者之間添加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