c/docs/.vitepress/theme/style/rainbow.css
2024-10-17 10:18:19 +08:00

451 lines
7.8 KiB
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,.dark {
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);
}
/* h1 标题 */
h1 {
background: -webkit-linear-gradient(10deg, var(--rainbow-prev) 5%, var(--rainbow-next) 15%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(120px);
}
}
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(120px);
}
}
/* Safari has a very bad performance on gradient and filter */
.browser-safari,
.browser-firefox {
--vp-home-hero-image-background-image: transparent;
--vp-home-hero-image-filter: '';
}