css 随机颜色

html-css030

css 随机颜色,第1张

我只写了一个字的变色其他也是一样的 利用随机数生成颜色编码 然后改写css

每次刷新 颜色都不一样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>会变色的字</title>

</head>

<body>

<p id="ppp"><b>会变色的字</b></p>

</body>

<script>

var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']

function generateMixed(n) {

var res = ""

for(var i = 0i <n i ++) {

var id = Math.ceil(Math.random()*16)

res += chars[id]

}

return res

}

var num = generateMixed(6)

var p = document.getElementById('ppp')

p.style.color = "#"+num

</script>

</html>

透明色:transparent

背景色设为透明,代码如下:background-color:transparent

字体颜色设为透明,代码如下:color:transparent

扩展资料:

常用颜色代码分4种,分别如下:

1、常用颜色单词,比如green(绿色),yellow(黄色),red(红色),transparent(透明色)等;

2、以#号开头的六个字符组成的颜色代码,比如:#FF0000(红色),#000000(黑色),#F9F900(黄色)等;

3、颜色rgb值,表达方式:rgb(参数1,参数2,参数3),三个参数分别表示r,g,b

1)R:红色值。正整数|百分数

2)G:绿色值。正整数|百分数

3)B:蓝色值。正整数|百分数

4、rgba(参数1,参数2,参数3,参数4),这种方式前三个参数与上面第3点种相同,第四个参数表示透明度,数值在0-1之间。0表示透明度为0(即透明色),1表示透明度为1(百分百)。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:。

body {

animation: change 3s linear 0s infinite

}

@keyframes change {

0% {color: #333}

50% {color: #f60}

100% {color: #f00}

}

3、浏览器运行index.html页面,此时字体颜色会随着时间的变化而自动变化。