组件 让你的组件头衔变的炫酷

开源 Discourse
1

image
image2300×1798 281 KB

image
image1700×552 51.8 KB

image
image1764×732 80.7 KB

/* 炫彩渐变动画 */
@keyframes rainbow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 炫彩效果应用于 SVIP 群组头衔 */
a.user-group[data-group-card="SVIP"] {
    display: inline-block; /* 确保可以使用背景 */
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); /* 渐变颜色 */
    background-size: 200% 200%; /* 背景大小 */
    color: white !important; /* 字体颜色 */
    padding: 2px 8px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    font-weight: bold; /* 加粗字体 */
    animation: rainbow 5s linear infinite; /* 动画设置 */
    text-decoration: none; /* 移除下划线 */
}

/* 可选：为悬停状态增加特效 */
a.user-group[data-group-card="SVIP"]:hover {
    filter: brightness(1.2); /* 悬停时增加亮度 */
}
2

如何修改 先找到你的

image
image306×112 10.3 KB

右键
image
image2716×890 350 KB

a.user-group[data-group-card=“SVIP”] {
修改里面CSS的这个

3 
/* 桌面端：炫彩渐变效果 */
a.user-group[data-group-card="SVIP"] {
    display: inline-block; /* 确保可以使用背景 */
    background: linear-gradient(90deg, #ff7eb3, #ffeb3b, #67d6ff, #ff7eb3); /* 渐变颜色 */
    background-size: 300% 300%; /* 背景大小 */
    color: white !important; /* 字体颜色 */
    padding: 6px 14px; /* 内边距 */
    border-radius: 12px; /* 圆角 */
    font-weight: bold; /* 加粗字体 */
    font-size: 14px; /* 默认字体大小 */
    animation: rainbow-left 10s linear infinite; /* 动画设置，速度调整为 10 秒 */
    text-decoration: none; /* 移除下划线 */
    white-space: nowrap; /* 防止文字换行 */
}

/* 炫彩动画：始终向左滚动 */
@keyframes rainbow-left {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: -300% 50%;
    }
}

/* 悬停特效：桌面端 */
a.user-group[data-group-card="SVIP"]:hover {
    filter: brightness(1.2); /* 悬停时增加亮度 */
}
4

优化了一下 :checkered_flag:

1 Like
5

不错不错，真好看。