css3背景颜色渐变动画

通过背景定位来实现 background-position

在线demo: https://demo.crazyming.com/?link=css3/gradientBg.html

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            width: 100%;
            height: 100vh;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }

        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    </style>