gridient.gif
css3的线性渐变是不支持animation的，因此需要用一些间接的办法
(1)使用background-position
<style>
.gridient-box{
width: 300px;
height: 100px;
background: linear-gradient(90deg,deeppink 0%,orange 100%);
background-position: 0 0;
background-size: 200%,100%;
animation: changebg 3s linear infinite alternate;
}
@keyframes changebg{
0%{background-position: 0 0;}
100%{background-position: 100% 0;}
}
</style>
</head>
<body>
<div class="gridient-box"></div>
</body>
