纯CSS背景渐变效果

效果图

完整代码

括号内的deg是角度

CSS部分

#wrap {
    background: -webkit-linear-gradient(45deg,#5a3694 0%, #13bdce 33%, #0094d9 66%, #6fc7b5 100%);
    background-size: 400%;
    background-position: 0% 100%;
    animation: gradient 7.5s ease-in-out infinite;
    width: 100%;
    max-width: 100%;
    min-height: 80vh;
}
@-webkit-keyframes gradient{50%{background-position:100% 0}}
@keyframes gradient{50%{background-position:100% 0}}

引用

<div id="wrap"></div>