<style type="text/css">
.gradient0 {
background: linear-gradient(to right,#5ccdde,#fa3f30,#563b5f,#5dc13a,#2b403c,#28438f,#e9e596,#8d0288);
background-size: 2000%;
animation: gradientBackground 5s alternate ease-out;
animation-iteration-count: infinite
}
.gradient1 {
background: linear-gradient(to right,#5ccdde,#eb0828,#456840,#27e52a,#aa5e31,#be77e1,#39693d,#6305bc);
background-size: 1624%;
animation: gradientBackground 9s alternate ease-out;
animation-iteration-count: infinite
}
.gradient2 {
background: linear-gradient(to right,#5ccdde,#c78dd7,#cfa58a,#9500f1,#d634b9,#2eec98,#4d2ea6,#f9857b);
background-size: 1898%;
animation: gradientBackground 8s alternate ease-out;
animation-iteration-count: infinite
}
.gradient3 {
background: linear-gradient(to right,#5ccdde,#0ca282,#5039ea,#a97b90,#b6fdf8,#db4978,#f3bcb5,#6b0adf);
background-size: 1915%;
animation: gradientBackground 8s alternate ease-out;
animation-iteration-count: infinite
}
.gradient4 {
background: linear-gradient(to right,#5ccdde,#5c2b1b,#b2464d,#9b20e3,#281c5a,#dabbff,#62ca9b,#dcbfb9);
background-size: 1574%;
animation: gradientBackground 9s alternate ease-out;
animation-iteration-count: infinite
}
.gradient5 {
background: linear-gradient(to right,#5ccdde,#6dce22,#04763e,#0dd58e,#fcd294,#06b8f4,#c0f78d,#c58451);
background-size: 1624%;
animation: gradientBackground 9s alternate ease-out;
animation-iteration-count: infinite
}
.gradient6 {
background: linear-gradient(to right,#5ccdde,#c61e1f,#9fddc4,#ce7290,#523618,#3d047e,#076c5d,#dd0016);
background-size: 1933%;
animation: gradientBackground 9s alternate ease-out;
animation-iteration-count: infinite
}
@keyframes gradientBackground {
0% {
background-position: 0 0
}
50% {
background-position: 50% 100%
}
100% {
background-position: 100% 0
}
}
</style>
<div class="gradient0" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient1" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient2" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient3" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient4" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient5" style="width:98%;height:4em;margin:auto;"></div>
<div class="gradient6" style="width:98%;height:4em;margin:auto;"></div>
演示效果
.gradient0 {
background: linear-gradient(to right,#5ccdde,#fa3f30,#563b5f,#5dc13a,#2b403c,#28438f,#e9e596,#8d0288);
background-size: 2000%;
animation: gradientBackground 5s alternate ease-out;
animation-iteration-count: infinite
}
.gradient1 {
background: linear-gradient(to right,#5ccdde,#eb0828,#456840,#27e52a,#aa5e31,#be77e1,#39693d,#6305bc);
background-size: 1624%;
animation: gradientBackground 9s alternate ease-out;
animation-iteration-count: infinite
}
.gradient2 {
background: linear-gradient(to right,#5ccdde,#c78dd7,#cfa58a,#9500f1,#d634b9,#2eec98,#4d2ea6,#f9857b);
background-size: 1898%;
animation: gradientBackground 8s alternate ease-out;
animation-iteration-count: infinite
}
.gradient3 {
background: linear-gradient(to right,#5ccdde,#0ca282,#5039ea,#a97b90,#b6fdf8,#db4978,#f3bcb5,#6b0adf);
background-size: 1915%;
animation: gradientBackground 8s alternate ease-out;
animation-iteration-count: infinite
}
.gradient4 {
background: linear-gradient(to right,#5ccdde,#5c2b1b,#b2464d,#9b20e3,#281c5a,#dabbff,#62ca9b,#dcbfb9);
background-size: 1574%;
animation: gradientBackground 9s alternate ease-out;
animation-iteration-count: infinite
}
.gradient5 {
background: linear-gradient(to right,#5ccdde,#6dce22,#04763e,#0dd58e,#fcd294,#06b8f4,#c0f78d,#c58451);
background-size: 1624%;
animation: gradientBackground 9s alternate ease-out;
animation-iteration-count: infinite
}
.gradient6 {
background: linear-gradient(to right,#5ccdde,#c61e1f,#9fddc4,#ce7290,#523618,#3d047e,#076c5d,#dd0016);
background-size: 1933%;
animation: gradientBackground 9s alternate ease-out;
animation-iteration-count: infinite
}
@keyframes gradientBackground {
0% {
background-position: 0 0
}
50% {
background-position: 50% 100%
}
100% {
background-position: 100% 0
}
}
