美文网首页
纯css实现背景颜色渐变动画

纯css实现背景颜色渐变动画

作者: hunter97 | 来源:发表于2021-10-19 17:40 被阅读0次

    纯css实现背景颜色渐变动画,代码及效果图如下。

    body {
        width: 100vw;
        height: 100vh;
        color: #fff;
        background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
    }
    
    @-webkit-keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }
    
    @-moz-keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }
    
    @keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }
    

    效果图:



    这世上从来就没有横空出世的运气,只有不为人知的努力。

    相关文章

      网友评论

          本文标题:纯css实现背景颜色渐变动画

          本文链接:https://www.haomeiwen.com/subject/ckornqtx.html