挂件头衔✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注切换到宽版
  • 首页
  • 社区
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 三款不错的CSS动态渐变背景 ...
    返回列表 发布新帖
    查看: 148|回复: 0

    [代码技巧] 子比主题 – 三款不错的CSS动态渐变背景

    [复制链接]
    社区贡献

    331

    主题

    204

    回帖

    2万

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 293 颗
       贡献 : 40842 点
       金币 : 24 枚
    Icon在线时间 : 1696 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-6-11

    荣誉勋章

    连续签到LV.1累计签到LV.3任务·年会员幸运抽奖·皇幸运抽奖·尊幸运抽奖·豪起源之星摩羯座推广LV.2钻石LV.1注册一周年

    总共送礼：1 个    总共收礼：0 个

    实力·绝代收藏家
    飞流名人堂成员 1 FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-10 15:44:01 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    这篇文章是子比主题的三款CSS动态的渐变背景，只截了静态图片，如果想要看效果，自己部署一下代码即可看效果即可，喜欢的自行部署！

    第一款


    tengfei_down - 2025-10-10T154229.722.webp

    第二款


    tengfei_down - 2025-10-10T154231.300.webp

    第三款


    tengfei_down - 2025-10-10T154232.810.webp

    代码部署


    三款都是CSS代码，直接将代码放到：子比主题–>>自定义CSS样式即可！按顺序提供的代码块。
    1. body:before {
    2.     content: "";
    3.     position: fixed;
    4.     top: 0;
    5.     left: 0;
    6.     right: 0;
    7.     bottom: 0;
    8.     z-index: -520;
    9.     pointer-events: none
    10. }

    12. body:before {
    13.     background: linear-gradient(90deg,#f795331a,#f370551a 15%,#ef4e7b1a 30%,#a166ab1a,#5073b81a,#1098ad1a,#07b39b1a 86%,#6dba821a)
    14. }
    复制代码
    1. body {
    2.   margin: 0;
    3.   min-height: 100vh;
    4.   background-color: #e493d0;
    5.   background-image:
    6.     radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
    7.     radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
    8.     radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
    9.     radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
    10.     radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
    11.   background-size:
    12.     130vmax 130vmax,
    13.     80vmax 80vmax,
    14.     90vmax 90vmax,
    15.     110vmax 110vmax,
    16.     90vmax 90vmax;
    17.   background-position:
    18.     -80vmax -80vmax,
    19.     60vmax -30vmax,
    20.     10vmax 10vmax,
    21.     -30vmax -10vmax,
    22.     50vmax 50vmax;
    23.   background-repeat: no-repeat;
    24.   animation: 10s movement linear infinite;
    25. }

    27. @keyframes movement {
    28.   0%, 100% {
    29.     background-size:
    30.       130vmax 130vmax,
    31.       80vmax 80vmax,
    32.       90vmax 90vmax,
    33.       110vmax 110vmax,
    34.       90vmax 90vmax;
    35.     background-position:
    36.       -80vmax -80vmax,
    37.       60vmax -30vmax,
    38.       10vmax 10vmax,
    39.       -30vmax -10vmax,
    40.       50vmax 50vmax;
    41.   }
    42.   25% {
    43.     background-size:
    44.       100vmax 100vmax,
    45.       90vmax 90vmax,
    46.       100vmax 100vmax,
    47.       90vmax 90vmax,
    48.       60vmax 60vmax;
    49.     background-position:
    50.       -60vmax -90vmax,
    51.       50vmax -40vmax,
    52.       0vmax -20vmax,
    53.       -40vmax -20vmax,
    54.       40vmax 60vmax;
    55.   }
    56.   50% {
    57.     background-size:
    58.       80vmax 80vmax,
    59.       110vmax 110vmax,
    60.       80vmax 80vmax,
    61.       60vmax 60vmax,
    62.       80vmax 80vmax;
    63.     background-position:
    64.       -50vmax -70vmax,
    65.       40vmax -30vmax,
    66.       10vmax 0vmax,
    67.       20vmax 10vmax,
    68.       30vmax 70vmax;
    69.   }
    70.   75% {
    71.     background-size:
    72.       90vmax 90vmax,
    73.       90vmax 90vmax,
    74.       100vmax 100vmax,
    75.       90vmax 90vmax,
    76.       70vmax 70vmax;
    77.     background-position:
    78.       -50vmax -40vmax,
    79.       50vmax -30vmax,
    80.       20vmax 0vmax,
    81.       -10vmax 10vmax,
    82.       40vmax 60vmax;
    83.   }
    84. }
    复制代码
    1. * {
    2.   box-sizing: border-box;
    3.   margin: 0;
    4.   padding: 0;
    5. }
    6. body {
    7.   overflow:scroll;
    8.   overflow-x:hidden;
    9.   width: 100vw;
    10.   height: 100vh;
    11.   background: linear-gradient(
    12.           135deg,
    13.           hsl(170deg, 80%, 70%),
    14.           hsl(190deg, 80%, 70%),
    15.           hsl(250deg, 80%, 70%),
    16.           hsl(320deg, 80%, 70%)
    17.   );
    18.   background-size: 200% 200%;
    19.   animation: gradient-move 15s ease alternate infinite;
    20. }

    22. @keyframes gradient-move {
    23.   0% {
    24.     background-position: 0% 0%;
    25.   }
    26.   100% {
    27.     background-position: 100% 100%;
    28.   }
    29. }
    复制代码



    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-6-12 07:06 , Processed in 0.080259 second(s), 84 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表