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%;
    }
}

加入一个渐变色的背景

推荐文章

迷思

你会觉得自己付出的不够多而陷入一种自我否定的情绪中.被...

中国式相亲之现状

最近芒果台在播的《我家那闺女》我有在看,我特别喜欢的就...

评论区(暂无评论)

我要评论

昵称
邮箱
网址
0/200
没有评论
可按 ESC 键退出搜索

0 篇文章已搜寻到~