HTML实现平滑地随时间渐渐变色效果
让元素颜色有变化可强调元素、营造气氛、加深用户印象、让您的网站更炫酷、解决颜色选择困难症并取悦甲方，好处多多。
本文将提供两个方法来实现此效果，希望能对您的网页设计有所帮助。
完整代码：
简单实用的低配置版本(简陋版)
<html>
<head>
<meta charset="UTF-8" />
<title>简陋变色</title>
<script type="text/javascript">
function cready() {
r = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)]
ra = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)]
dr = [(ra[0] - r[0]) / (Math.floor(Math.random() * 200) + 50), (ra[1] - r[1]) / (Math.floor(Math.random() * 200) + 50), (ra[2] - r[2]) / (Math.floor(Math.random() * 200) + 50)]
tr = []
}
function chc() {
for (i = 0; i < 3; i++) {
window.r[i] = r[i] + dr[i]
window.tr[i] = Math.round(r[i])
if (tr[i] == ra[i]) {
window.ra[i] = Math.floor(Math.random() * 256)
window.dr[i] = (ra[i] - r[i]) / (Math.floor(Math.random() * 200) + 50)
}
}
window.tcolor = "rgb(" + tr + ")"
document.body.style.background = tcolor
h.innerHTML = tcolor
}
window.onload = function () {
cready()
setInterval("chc()", 20)
}
</script>
</head>
<body>
<h1 id="h"></h1>
</body>
</html>简单实用的低配置版本(升级版)
<html>
<head>
<meta charset="utf-8">
<title>平滑变色</title>
<script type="text/javascript">
function changerf(s) {
s = parseInt(s);
var t = Math.floor(Math.random() * 200) + 50;
var x = 0;
var bz = [];
var k=s / t;
while (x < t) {
bz[x] = Math.floor(k * x);
x += 1;
}
bz[t] = s;
return bz;
}
function changecf() {
changeli();
var name = document.getElementsByName("changecolor");
var n = name.length;
for (i = 0; i < 3 * n; i++) {
changestep[i]--
}
}
function changeli() {
var name = document.getElementsByName("changecolor");
var n = name.length;
for (i = 0; i < 3 * n; i++) {
if ((!changetc[i])&&changetc[i]!=0) {
changewc[i] = Math.floor(Math.random() * 256);
}
if (!changestep[i]) {
changetc[i] = changewc[i];
changewc[i] = Math.floor(Math.random() * 256);
changeway[i] = [];
changeway[i] = changerf(changewc[i] - changetc[i]);
changestep[i] = changeway[i].length;
}
}
for (i = 0; i < n; i++) {
changevv[i] = [
changetc[3 * i] + changeway[3 * i][changeway[3 * i].length - changestep[3 * i]],
changetc[3 * i + 1] + changeway[3 * i + 1][changeway[3 * i + 1].length - changestep[3 * i + 1]],
changetc[3 * i + 2] + changeway[3 * i + 2][changeway[3 * i + 2].length - changestep[3 * i + 2]]
]
name[i].style.background = "rgb(" + changevv[i] + ")";
}
}
function changeready() {
changetc = [];
changeway = [];
changewc = [];
changestep = [];
changevv = [];
}
function changesfccf() {
if (changesfcc.checked) {
window.clearInterval(changeco);
changeco = setInterval(changecf, 20);
} else {
window.clearInterval(changeco);
}
}
window.onload = function () {
changeready();
changeco=setInterval(changecf, 20);
}
</script>
</head>
<body name="changecolor">
<button onclick="colorblock.innerHTML=colorblock.innerHTML+'<li name=\'changecolor\'></li>';changeli();">
+
</button>
<button onclick="document.getElementsByName('changecolor')[document.getElementsByName('changecolor').length-1].remove()">
-
</button>
<a onclick="changesfccf()">
<input type="checkbox" id="changesfcc" checked />变色
</a>
<ol id="colorblock"><li name='changecolor'></li></ol>
</body>
</html>更圆滑的花里胡哨版本
<html>
<head>
<meta charset="utf-8">
<title>高级平滑变色</title>
<script type="text/javascript">
changebli = 2.5;
changeblm = 4;
function changerf(s, i, m) {
var n = Math.round((Math.random() * 800) + 1600) / 1000;
i = parseInt(i);
s = parseInt(s);
if (s < 0) {
i = 0 - Math.abs(i);
} else if (s == 0) {
return 0;
} else {
i = Math.abs(i);
}
var rmin = Math.sqrt(2 * n * s / i);
var rmax = Math.sqrt(2 * n * s * i);
var m = parseInt(m)
var t = Math.floor(Math.random() * (rmax - rmin) + rmin);
var x = 0;
var bz = [];
var l = t * m;
var k = (Math.pow(2, n - 1) * s) / Math.pow(l, n);
while (x < l / 2) {
bz[x] = Math.round(k * Math.pow(x, n));
x += 1;
}
while (x < l) {
bz[x] = Math.round((0 - k) * Math.pow(Math.abs(x - l), n) + s);
x += 1;
}
bz[l] = Math.round(s);
return bz;
}
function changecf() {
changeli();
var name = document.getElementsByName("changecolor");
var n = name.length;
for (i = 0; i < 3 * n; i++) {
changestep[i]--
}
}
function changeli() {
var name = document.getElementsByName("changecolor");
var n = name.length;
for (i = 0; i < 3 * n; i++) {
if (!changeway[i]) {
changewc[i] = Math.floor(Math.random() * 256);
}
if ((!changetc[i])&&changetc[i]!=0) {
changetc[i] = changewc[i];
changewc[i] = Math.floor(Math.random() * 256);
changeway[i] = [];
changeway[i] = changerf(changewc[i] - changetc[i], changebli, changeblm);
changestep[i] = changeway[i].length;
}
}
for (i = 0; i < n; i++) {
changevv[i] = [
changetc[3 * i] + changeway[3 * i][changeway[3 * i].length - changestep[3 * i]],
changetc[3 * i + 1] + changeway[3 * i + 1][changeway[3 * i + 1].length - changestep[3 * i + 1]],
changetc[3 * i + 2] + changeway[3 * i + 2][changeway[3 * i + 2].length - changestep[3 * i + 2]]
]
name[i].style.background = "rgb(" + changevv[i] + ")";
}
}
function changeready() {
changetc = [];
changeway = [];
changewc = [];
changestep = [];
changevv = [];
}
function changesfccf() {
if (changesfcc.checked) {
window.clearInterval(changeco);
changeco = setInterval(changecf, 20);
} else {
window.clearInterval(changeco);
}
}
window.onload = function () {
changeready();
changeco=setInterval(changecf, 20);
}
</script>
</head>
<body name="changecolor">
<input id=getbsi value=2.5 onchange="changebli=getbsi.value" />变换曲线曲率最大/最小值(≥1)<br />
<input id=getm value=4 onchange="changeblm=getm.value" />变换减速倍数(>0)<br />
<button onclick="colorblock.innerHTML=colorblock.innerHTML+'<li name=\'changecolor\'></li>';changeli();">
+
</button>
<button onclick="document.getElementsByName('changecolor')[document.getElementsByName('changecolor').length-1].remove()">
-
</button>
<a onclick="changesfccf()">
<input type="checkbox" id="changesfcc" checked />变色
</a>
<ol id="colorblock"><li name='changecolor'></li></ol>
</body>
</html>s/t图像
简单实用的低配置版本
正比例函数
- x：时间
- y：变化值
- s：需要变化的值
- t：变化时间
更圆滑的花里胡哨版本
一元n次函数
- x：时间
- y：变化值
- m：减速倍数
- n：曲线次数
- s：需要变化的值
- t：变化时间
- i：图像最大/最小斜度
思路
我们可以先思考如何随机改变元素的颜色，再思考如何让颜色的改变变得平缓。
随机改变颜色是非常简单的，我们只需要使用随机数生成一个颜色，然后让元素变成那个颜色就可以了。 在此基础上，我们可以想到一种平缓改变颜色的方式：使用随机数生成一个目标颜色，然后获取自己的颜色，让自己的颜色一点一点变成目标颜色。等着检测到当前颜色变成了目标颜色，就再生成一个目标颜色。
为了提高效率，我们可以不去真的获取元素的颜色，而是通过计算已保存的变量获取元素当前颜色，为了防止计算错误，我们需要在开始前给元素人为设置一个颜色，也就是初始化。初始化还可以防止变量在声明前就被使用导致无法运行。
一点一点变成目标颜色的方法有很多种。例如简单实用的低配置版本是计算一次变化的值，然后在完成变化周期前一直使用这个值，直到检测到已为目标颜色；更平滑的花里胡哨版本则是在每个变化周期前先计算好每次需改变的值，存到数组里，再根据数组改变颜色。