css渐变背景

CSS动画与背景渐变

最新推荐文章于 2025-12-01 15:56:28 发布

原创最新推荐文章于 2025-12-01 15:56:28 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

JavaScript / css / HTML 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一种利用CSS实现的动态背景效果，通过@keyframes定义动画，结合linear-gradient设置背景渐变，并使用animation属性控制动画播放，实现了背景颜色从#ff22ff渐变至#0621再至#4422cc的循环效果。

<style>
    @keyframes n
    {
        0%{background-position: 0% 0%;}
        50%{background-position: 100% 100%;}
        100%{background-position: 0% 0%;}
    }
    html{
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background: linear-gradient(to bottom right,#ff22ff ,#0621,#4422cc);
        background-size: 400% 400%;
        animation: n 10s infinite;
    }
</style>