皮皮社
记录生活中的点点滴滴
使用css给网站添加渐变背景

使用css给网站添加渐变背景

温馨提示:本文发布至今已经32天没有更新了,若内容或图片失效,请留言反馈。 [ 我要反馈 ]

渐变背景

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)); /*背景颜色*/
}

动态渐变背景

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

添加主题的“自定义CSS”中即可,如果没这选项,直接添加到主题CSS中。
[转自:洛丽糖 luolt.cn]
感觉不错,收藏了。

[ 最后修改于: 2024年09月03日 17:44 ]
文章来源: 部分内容可能来源于公共网络,仅供学习交流,如有侵权,请联系博主进行核实删除。
评论: 0 | 查看: 135
发表评论
隐私评论

湘ICP备2024058534号-1 湘公网安备43110002000102
©2024 PIPISHE Sitemap
暗黑切换