链接添加动态渐变色

字数: 0 字 | 时长: 0 分钟

预览：

实现：

新建文件 /vitepress/theme/style/vitepress.scss ，在其中加入如下代码 🎉

scss

/* /vitepress/theme/style/vitepress.scss */

/* 链接渐变色动画定义 */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 选中链接后的文字颜色 */
.vp-doc a:hover {
  background: linear-gradient(90deg, #ffffd1, #ff531e, #000000, #0bbc91);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration-color: #0ca8d8;
  animation: gradientFlow 3s ease infinite;
}

/* 渐变色链接文字 */
.vp-doc a {
  background: linear-gradient(90deg, #3ec917, #ff8a00, #b3d80c, #18c0ba, #d43f9d);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration-color: #0ca8d8;
  animation: gradientFlow 5s linear infinite;
}

/* 外部链接图标-小箭头 */
.external-link-icon-enabled :is(.vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after
{
  content: '';
  color: #0ca8d8;
}

接着在 /vitepress/theme/index.ts 中引入 vitepress.scss 🎉

import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './style.css'
import './style/index.scss'

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app, router, siteData }) {
    // ...
  }
} satisfies Theme

完成！ 🎉

具体代码参考请此处 /vitepress.scss

链接添加动态渐变色 ​

预览： ​

实现： ​

链接添加动态渐变色

预览：

实现：