CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
#ishanColor {
animation: change 10s infinite;
}

@keyframes change {
0% {
color: #66e616;
}

25% {
color: #556bd8;
}

50% {
color: #e40707;
}

75% {
color: #5cb85c;
}

100% {
color: #e7e97d;
}
}
</style>

JS实现HTML动态渐变纯色背景

效果图:


JS实现HTML动态渐变纯色背景

JS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
$(function () {
var sec = 5;
var sz = new Array('rgba(255,20,147,0.6)',
'rgba(152,251,152,0.6)',
'rgba(135,206,250)',
'rgba(0,255,255,0.6)',
'rgba(255,165,0,0.6)',
'rgba(186,85,211,0.6)');
timestar = setInterval(function () {
if (sec >= 0) {
document.body.style.background = sz[sec];
sec--;
}
else {
sec = 5;
}
}, 1000);
})
</script>

CSS代码:

1
2
3
4
5
body{
color: black
background:white;
transition: 3s;
}