背景颜色渐变动画

0

实现

<h1>背景颜色渐变动画</h1>
body {
    width: 100wh;
    height: 100vh;
    color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB) no-repeat;
    background-size: 400%;
    animation: Gradient 15s ease infinite;
}


@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
h1,
h6 {
    font-family: 'Open Sans';
    font-weight: 300;
    text-align: center;
    position: absolute;
    top: 45%;
    right: 0;
    left: 0;
}

原理

background的linear-gradient属性

  • 关于linear-gradient可以移步这里


上图为background-size为100时,可以看出渐变区域为四个,当我们把background-size改成400,就会在可视区域显示一个渐变区域,然后利用background-position的X坐标定位,改变background的位置,来实现渐变的动画效果。