动画测试

Henry

<!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>