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

最新推荐文章于 2025-11-27 22:01:19 发布

原创最新推荐文章于 2025-11-27 22:01:19 发布 · 9.1k 阅读

62 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #js #html #animation

这篇博客展示了如何使用CSS代码创建一个背景颜色从#EE7752渐变到#23D5AB的动画效果。通过设置`linear-gradient`背景、`background-size`和`animation`属性，实现了45度角的色彩流动动画，动画周期为15秒，平滑无限循环。

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

body {
    width: 100wh;
    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%
    }
}

效果图：