uiui的熊猫笔记

深浅模式


🌈 彩虹背景动画 ​

更新: 4/21/2025
字数: 0 字
阅读时长: 0 分钟

这里的文章直接引用大佬的教程

🌈彩虹背景教程
https://vitepress.yiov.top/

在 UnoCSS 首页中，它的hero标题和图片背景有类似彩虹的渐变色动画

我们通过修改css样式实现，在 theme/style 新建 rainbow.css 文件

md
.
├─ docs
│  ├─ .vitepress
│  │  └─ config.mts
│  │  └─ theme
│  │     └─ style
│  │        └─ index.css
│  │        └─ rainbow.css
│  └─ index.md
└─ node_modules

复制下面代码，粘贴到 rainbow.css 中

点我查看代码
css
/* 彩虹动画 */
@keyframes rainbow {
    0% {
        --rainbow-prev: #009ff7;
        --rainbow-next: #c76dd1;
    }

    1.25% {
        --rainbow-prev: #009dfa;
        --rainbow-next: #cf69c9;
    }

    2.5% {
        --rainbow-prev: #009bfc;
        --rainbow-next: #d566c2;
    }

    3.75% {
        --rainbow-prev: #0098fd;
        --rainbow-next: #dc63ba;
    }

    5% {
        --rainbow-prev: #0096fd;
        --rainbow-next: #e160b3;
    }

    6.25% {
        --rainbow-prev: #0093fd;
        --rainbow-next: #e65eab;
    }

    7.5% {
        --rainbow-prev: #2e90fc;
        --rainbow-next: #e95ca2;
    }

    8.75% {
        --rainbow-prev: #4d8dfa;
        --rainbow-next: #ed5a9a;
    }

    10% {
        --rainbow-prev: #638af8;
        --rainbow-next: #ef5992;
    }

    11.25% {
        --rainbow-prev: #7587f5;
        --rainbow-next: #f15989;
    }

    12.5% {
        --rainbow-prev: #8583f1;
        --rainbow-next: #f25981;
    }

    13.75% {
        --rainbow-prev: #9280ed;
        --rainbow-next: #f25a79;
    }

    15% {
        --rainbow-prev: #9f7ce9;
        --rainbow-next: #f25c71;
    }

    16.25% {
        --rainbow-prev: #aa78e3;
        --rainbow-next: #f15e69;
    }

    17.5% {
        --rainbow-prev: #b574dd;
        --rainbow-next: #ef6061;
    }

    18.75% {
        --rainbow-prev: #be71d7;
        --rainbow-next: #ed635a;
    }

    20% {
        --rainbow-prev: #c76dd1;
        --rainbow-next: #eb6552;
    }

    21.25% {
        --rainbow-prev: #cf69c9;
        --rainbow-next: #e8694b;
    }

    22.5% {
        --rainbow-prev: #d566c2;
        --rainbow-next: #e46c44;
    }

    23.75% {
        --rainbow-prev: #dc63ba;
        --rainbow-next: #e06f3d;
    }

    25% {
        --rainbow-prev: #e160b3;
        --rainbow-next: #db7336;
    }

    26.25% {
        --rainbow-prev: #e65eab;
        --rainbow-next: #d77630;
    }

    27.5% {
        --rainbow-prev: #e95ca2;
        --rainbow-next: #d17a2a;
    }

    28.75% {
        --rainbow-prev: #ed5a9a;
        --rainbow-next: #cc7d24;
    }

    30% {
        --rainbow-prev: #ef5992;
        --rainbow-next: #c6811e;
    }

    31.25% {
        --rainbow-prev: #f15989;
        --rainbow-next: #bf8418;
    }

    32.5% {
        --rainbow-prev: #f25981;
        --rainbow-next: #b98713;
    }

    33.75% {
        --rainbow-prev: #f25a79;
        --rainbow-next: #b28a0f;
    }

    35% {
        --rainbow-prev: #f25c71;
        --rainbow-next: #ab8d0c;
    }

    36.25% {
        --rainbow-prev: #f15e69;
        --rainbow-next: #a3900b;
    }

    37.5% {
        --rainbow-prev: #ef6061;
        --rainbow-next: #9c920d;
    }

    38.75% {
        --rainbow-prev: #ed635a;
        --rainbow-next: #949510;
    }

    40% {
        --rainbow-prev: #eb6552;
        --rainbow-next: #8b9715;
    }

    41.25% {
        --rainbow-prev: #e8694b;
        --rainbow-next: #83991b;
    }

    42.5% {
        --rainbow-prev: #e46c44;
        --rainbow-next: #7a9b21;
    }

    43.75% {
        --rainbow-prev: #e06f3d;
        --rainbow-next: #719d27;
    }

    45% {
        --rainbow-prev: #db7336;
        --rainbow-next: #679e2e;
    }

    46.25% {
        --rainbow-prev: #d77630;
        --rainbow-next: #5da035;
    }

    47.5% {
        --rainbow-prev: #d17a2a;
        --rainbow-next: #51a13c;
    }

    48.75% {
        --rainbow-prev: #cc7d24;
        --rainbow-next: #44a244;
    }

    50% {
        --rainbow-prev: #c6811e;
        --rainbow-next: #34a44b;
    }

    51.25% {
        --rainbow-prev: #bf8418;
        --rainbow-next: #1ba553;
    }

    52.5% {
        --rainbow-prev: #b98713;
        --rainbow-next: #00a65b;
    }

    53.75% {
        --rainbow-prev: #b28a0f;
        --rainbow-next: #00a663;
    }

    55% {
        --rainbow-prev: #ab8d0c;
        --rainbow-next: #00a76c;
    }

    56.25% {
        --rainbow-prev: #a3900b;
        --rainbow-next: #00a874;
    }

    57.5% {
        --rainbow-prev: #9c920d;
        --rainbow-next: #00a87d;
    }

    58.75% {
        --rainbow-prev: #949510;
        --rainbow-next: #00a985;
    }

    60% {
        --rainbow-prev: #8b9715;
        --rainbow-next: #00a98e;
    }

    61.25% {
        --rainbow-prev: #83991b;
        --rainbow-next: #00a996;
    }

    62.5% {
        --rainbow-prev: #7a9b21;
        --rainbow-next: #00a99f;
    }

    63.75% {
        --rainbow-prev: #719d27;
        --rainbow-next: #00a9a7;
    }

    65% {
        --rainbow-prev: #679e2e;
        --rainbow-next: #00a9b0;
    }

    66.25% {
        --rainbow-prev: #5da035;
        --rainbow-next: #00a9b8;
    }

    67.5% {
        --rainbow-prev: #51a13c;
        --rainbow-next: #00a9c0;
    }

    68.75% {
        --rainbow-prev: #44a244;
        --rainbow-next: #00a8c7;
    }

    70% {
        --rainbow-prev: #34a44b;
        --rainbow-next: #00a8cf;
    }

    71.25% {
        --rainbow-prev: #1ba553;
        --rainbow-next: #00a7d5;
    }

    72.5% {
        --rainbow-prev: #00a65b;
        --rainbow-next: #00a6dc;
    }

    73.75% {
        --rainbow-prev: #00a663;
        --rainbow-next: #00a6e2;
    }

    75% {
        --rainbow-prev: #00a76c;
        --rainbow-next: #00a4e7;
    }

    76.25% {
        --rainbow-prev: #00a874;
        --rainbow-next: #00a3ec;
    }

    77.5% {
        --rainbow-prev: #00a87d;
        --rainbow-next: #00a2f1;
    }

    78.75% {
        --rainbow-prev: #00a985;
        --rainbow-next: #00a0f4;
    }

    80% {
        --rainbow-prev: #00a98e;
        --rainbow-next: #009ff7;
    }

    81.25% {
        --rainbow-prev: #00a996;
        --rainbow-next: #009dfa;
    }

    82.5% {
        --rainbow-prev: #00a99f;
        --rainbow-next: #009bfc;
    }

    83.75% {
        --rainbow-prev: #00a9a7;
        --rainbow-next: #0098fd;
    }

    85% {
        --rainbow-prev: #00a9b0;
        --rainbow-next: #0096fd;
    }

    86.25% {
        --rainbow-prev: #00a9b8;
        --rainbow-next: #0093fd;
    }

    87.5% {
        --rainbow-prev: #00a9c0;
        --rainbow-next: #2e90fc;
    }

    88.75% {
        --rainbow-prev: #00a8c7;
        --rainbow-next: #4d8dfa;
    }

    90% {
        --rainbow-prev: #00a8cf;
        --rainbow-next: #638af8;
    }

    91.25% {
        --rainbow-prev: #00a7d5;
        --rainbow-next: #7587f5;
    }

    92.5% {
        --rainbow-prev: #00a6dc;
        --rainbow-next: #8583f1;
    }

    93.75% {
        --rainbow-prev: #00a6e2;
        --rainbow-next: #9280ed;
    }

    95% {
        --rainbow-prev: #00a4e7;
        --rainbow-next: #9f7ce9;
    }

    96.25% {
        --rainbow-prev: #00a3ec;
        --rainbow-next: #aa78e3;
    }

    97.5% {
        --rainbow-prev: #00a2f1;
        --rainbow-next: #b574dd;
    }

    98.75% {
        --rainbow-prev: #00a0f4;
        --rainbow-next: #be71d7;
    }

    100% {
        --rainbow-prev: #009ff7;
        --rainbow-next: #c76dd1;
    }
}

/* 彩虹色卡初始色 */
:root {
    --rainbow-prev: #009ff7;
    --rainbow-next: #c76dd1;
    /* animation: rainbow 8s linear infinite; */
}

:root {
    /* hero标题渐变色 */
    --vp-home-hero-name-color: transparent;
    --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--rainbow-prev) 30%, var(--rainbow-next));

    /*hero logo背景渐变色 */
    --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--rainbow-prev) 30%, var(--rainbow-next));
    --vp-home-hero-image-filter: blur(80px);
}

本来直接在代码中加入 animation 即可生效，但是由于颜色代码过多，渲染页面会很卡顿，换个方式不卡的方式来实现

在 theme/index.ts 中写入代码中，保存

md
.
├─ docs
│  ├─ .vitepress
│  │  └─ config.mts
│  │  └─ theme
│  │     └─ style
│  │        └─ index.css
│  │        └─ rainbow.css
│  │     └─ index.ts
│  └─ index.md
└─ node_modules
ts
/* .vitepress/theme/index.ts */
// 彩虹背景动画样式
let homePageStyle: HTMLStyleElement | undefined

export default {
  extends: DefaultTheme,

  enhanceApp({app , router }) {
    // 彩虹背景动画样式
    if (typeof window !== 'undefined') {
      watch(
        () => router.route.data.relativePath,
        () => updateHomePageStyle(location.pathname === '/'),
        { immediate: true },
      )
    }

  },
}
// 彩虹背景动画样式
function updateHomePageStyle(value: boolean) {
  if (value) {
    if (homePageStyle) return

    homePageStyle = document.createElement('style')
    homePageStyle.innerHTML = `
    :root {
      animation: rainbow 12s linear infinite;
    }`
    document.body.appendChild(homePageStyle)
  } else {
    if (!homePageStyle) return

    homePageStyle.remove()
    homePageStyle = undefined
  }
}

最后在 index.css 中引入生效，回到主页看效果

为什么我的没效果？
  • 自身问题：请仔细检查代码颜色色卡，是否正确配置
  • 电脑问题：我的电脑 - 右键 属性 - 高级系统设置 - 在系统属性页卡中 高级 - 性能 设置，默认为 调整为最佳外观，将 窗口内的动画控件和元素 打勾，确定（如果电脑字体变化，请调整为其他，只要确保勾选此项即可）
css
/* .vitepress/theme/style/index.css */
@import './rainbow.css';