<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:600px;
height:100px;
background: linear-gradient(124deg, #fb9d46 , #f07975,#1ddde8, #ffbe3a);
/*background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);*/
background-size: 180% 180%;
animation: rainbow 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@media (max-width:1000px)
@-webkit-keyframes rainbow{0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}
@-moz-keyframes rainbow{0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}
@-o-keyframes rainbow{0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}
@keyframes rainbow{0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}
</style>
</head>
<body>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</body>
</html>