每次刷新 颜色都不一样
<!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>
需要准备的材料分别有：电脑、浏览器、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页面，此时字体颜色会随着时间的变化而自动变化。
会影响，假如一开始是蓝色，要变为黄色，1秒后transition只执行了1/10,所以这时候的颜色为'中间值1'，这个时候修改background为绿色，transition还是需要再执行10秒，从'中间值1'过渡到绿色，1秒后的颜色为'中间值2'，再向下一个随机颜色过渡，重复此过程。
