AI摘要:这篇文章介绍了如何在自定义CSS中添加一个渐变色的背景。通过使用CSS的伪元素`::before`,可以在页面上创建一个覆盖整个屏幕的背景。然后使用线性渐变的背景颜色,并通过动画使背景颜色产生流动效果。代码示例展示了如何设置背景颜色和动画效果。

在自定义CSS中可以自定义背景

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -520;
    pointer-events: none;
}
body::before {
    background: linear-gradient( 90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)); /*背景颜色*/
    background-size: 500%;
    animation: bgAnimation 15s linear infinite; /*执行动画*/
}
@keyframes bgAnimation{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

加入一个渐变色的背景

[AD]【腾讯云】年度爆款2核2G4M云服务器118元/年,新老用户同享
最后修改:2024 年 07 月 18 日
如果觉得我的文章对你有用,请随意赞赏