来吧,始皇想要的赛博社区

baitao · 2025 年10 月 15 日 08:16

那我就如愿了

油猴脚本0.3,降低特效强度,新增5个头像框特效

// ==UserScript==
// @name         User Title & Avatar Holographic Effects
// @version      0.3
// @description  Apply holographic gradient to user titles and avatar border effects
// @author       白桃,claude,codex的产物
// @match        https://linux.do/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';

    // ============================================
    // 特效配置 Effects Configuration
    // ============================================

    // ========== 用户标题特效配置 ==========
    // 可用特效列表,按顺序循环应用到每个用户标题
    // 如需随机效果,设置 USE_RANDOM_EFFECT = true
    // 如需固定某个效果,将其他效果注释掉即可
    const EFFECTS = [
        'user-title-effect-pulse',         // 脉冲 - 呼吸光效
        'user-title-effect-glitch',        // 故障风 - 赛博朋克抖动
        'user-title-effect-explosion',     // 炸裂 - 粒子扩散震动
        'user-title-effect-fire',          // 火焰 - 橙红闪烁燃烧
        'user-title-effect-matrix',        // 黑客帝国 - 绿色代码雨
        'user-title-effect-rainbow',       // 彩虹流 - 完整光谱流动
        'user-title-effect-sparkle',       // 星光 - 闪烁星尘
        'user-title-effect-wave',          // 波浪 - 上下律动
        'user-title-effect-3d',            // 3D翻转 - 立体旋转
        'user-title-effect-neon',          // 霓虹灯 - 蓝紫发光脉冲
        'user-title-effect-plasma',        // 等离子 - 流动能量球
        'user-title-effect-aurora',        // 极光 - 北极光渐变
        'user-title-effect-electric',      // 电流 - 闪电能量
        'user-title-effect-crystal',       // 水晶 - 棱镜折射
        'user-title-effect-shadow',        // 暗影 - 深邃黑暗
        'user-title-effect-laser',         // 激光 - 扫描线条
        'user-title-effect-quantum',       // 量子 - 不确定性闪烁
        'user-title-effect-cosmic',        // 宇宙 - 星空深邃
        'user-title-effect-liquid',        // 液态 - 水波流动
        'user-title-effect-hologram'       // 全息图 - 数字投影
    ];

    // 随机模式:每次刷新随机打乱特效顺序
    const USE_RANDOM_EFFECT = false;

    // 动画速度调节 (1.0 = 正常, 0.5 = 两倍速, 2.0 = 半速)
    const ANIMATION_SPEED = 1.0;

    // ========== 头像边框特效配置 ==========
    // 头像特效开关: true = 启用, false = 禁用
    const AVATAR_EFFECT_ENABLED = true;

    // 头像特效类型选择:
    // 'none'            - 无特效
    // 'rotating-ring'   - 旋转光环 (彩色光环旋转)
    // 'breathing-glow'  - 呼吸光晕 (柔和呼吸光效)
    // 'particle-orbit'  - 粒子环绕 (粒子轨道环绕)
    // 'neon-pulse'      - 霓虹脉冲 (霓虹灯脉冲)
    // 'gradient-border' - 渐变边框 (流动渐变边框)
    const AVATAR_EFFECT_TYPE = 'rotating-ring';

    // 头像特效模式: 'fixed' | 'random' | 'sequential'
    // - 'fixed': 所有头像使用 AVATAR_EFFECT_TYPE 指定的特效
    // - 'random': 每个头像随机选择一种特效
    // - 'sequential': 按顺序循环应用特效
    const AVATAR_EFFECT_MODE = 'random';

    // 可用头像特效列表 (用于 random 和 sequential 模式)
    const AVATAR_EFFECTS = [
        'rotating-ring',
        'breathing-glow',
        'particle-orbit',
        'neon-pulse',
        'gradient-border',
        'soft-glow',
        'ripple',
        'star-twinkle',
        'pastel-gradient',
        'light-trace'
    ];

    // 头像特效强度: 'low' | 'medium' | 'high'
    const AVATAR_EFFECT_INTENSITY = 'low';

    const effectClassNames = [...EFFECTS];
    let effectCursor = 0;
    let avatarEffectCursor = 0;

    const css = `
/* ============================================
 * 特效样式 Effect Styles
 * 仅为添加特效类的标题应用动画效果
 * 未添加特效类的标题保持原样
 * ============================================ */

/* 默认全息渐变动画 - 供特效使用 */
@keyframes holographic {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 1. 脉冲 Pulse - 呼吸缩放 */
span[class*="user-title--"].user-title-effect-pulse {
    background: linear-gradient(135deg, #ff00ff 0%, #00ffff 25%, #ffff00 50%, #ff00ff 75%, #00ffff 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographic 15s ease-in-out infinite,
               user-title-pulse-scale 2s ease-in-out infinite;
}

@keyframes user-title-pulse-scale {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.05); filter: brightness(1.2); }
}

/* 2. 故障风 Glitch - RGB分离抖动 */
/mcp    background: linear-gradient(135deg, #ff00ff 0%, #00ffff 25%, #ffff00 50%, #ff00ff 75%, #00ffff 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographic 15s ease-in-out infinite,
               user-title-glitch 0.8s infinite;
}

@keyframes user-title-glitch {
    0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
        transform: skewX(0deg);
        filter: blur(0px);
    }
    41% { transform: skewX(10deg) translateX(-2px); filter: blur(1px); }
    42% { transform: skewX(-10deg) translateX(2px); filter: blur(1px); }
    59% { transform: skewX(40deg) translateX(-1px); filter: blur(0.5px); }
    60% { transform: skewX(-40deg) translateX(1px); filter: blur(0.5px); }
    63% { transform: skewX(10deg) translateX(-1px); filter: blur(1px); }
    70% { transform: skewX(-50deg) translateX(2px); filter: blur(0.5px); }
    71% { transform: skewX(10deg) translateX(-2px); filter: blur(1px); }
}

/* 3. 炸裂效果 Explosion - 震动缩放 */
span[class*="user-title--"].user-title-effect-explosion {
    background: linear-gradient(135deg, #ff00ff 0%, #00ffff 25%, #ffff00 50%, #ff00ff 75%, #00ffff 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographic 15s ease-in-out infinite,
               user-title-explosion 2s ease-in-out infinite;
}

@keyframes user-title-explosion {
    0%, 100% { transform: scale(1) rotate(0deg); }
    10% { transform: scale(0.95) rotate(-2deg); }
    20% { transform: scale(1.08) rotate(2deg); }
    30% { transform: scale(0.98) rotate(-1deg); }
    40% { transform: scale(1.12) rotate(1deg); }
    50% { transform: scale(1) rotate(0deg); }
    60% { transform: scale(1.05) rotate(-1deg); }
    70% { transform: scale(0.95) rotate(1deg); }
    80% { transform: scale(1.03) rotate(-0.5deg); }
    90% { transform: scale(0.97) rotate(0.5deg); }
}

/* 4. 火焰 Fire - 闪烁摇曳 */
span[class*="user-title--"].user-title-effect-fire {
    background: linear-gradient(135deg, #ff00ff 0%, #00ffff 25%, #ffff00 50%, #ff00ff 75%, #00ffff 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographic 15s ease-in-out infinite,
               user-title-fire 1.5s ease-in-out infinite;
    filter: brightness(1.1) saturate(1.3);
}

@keyframes user-title-fire {
    0%, 100% { transform: translateY(0px) scale(1); filter: brightness(1) hue-rotate(0deg); }
    25% { transform: translateY(-2px) scale(1.02); filter: brightness(1.15) hue-rotate(5deg); }
    50% { transform: translateY(1px) scale(0.98); filter: brightness(0.95) hue-rotate(-5deg); }
    75% { transform: translateY(-1px) scale(1.01); filter: brightness(1.1) hue-rotate(3deg); }
}

/* 5. 黑客帝国 Matrix - 绿色闪烁 */
span[class*="user-title--"].user-title-effect-matrix {
    background: linear-gradient(135deg, #00ff00 0%, #00cc00 50%, #00ff00 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-matrix-gradient 8s ease-in-out infinite,
               user-title-matrix 0.6s steps(4) infinite;
    font-family: 'Courier New', 'Consolas', monospace;
}

@keyframes user-title-matrix-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes user-title-matrix {
    0%, 100% { opacity: 1; filter: brightness(1.2); }
    50% { opacity: 0.7; filter: brightness(0.8); }
}

/* 6. 彩虹流 Rainbow - 完整光谱流动 */
span[class*="user-title--"].user-title-effect-rainbow {
    background: linear-gradient(
        90deg,
        #ff0000 0%,
        #ff7f00 14.28%,
        #ffff00 28.56%,
        #00ff00 42.84%,
        #00ffff 57.12%,
        #0000ff 71.4%,
        #8b00ff 85.68%,
        #ff0000 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-rainbow 4s linear infinite;
}

@keyframes user-title-rainbow {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* 7. 星光 Sparkle - 金色闪烁 */
span[class*="user-title--"].user-title-effect-sparkle {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffffff 50%, #ffed4e 75%, #ffd700 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-sparkle 2.5s ease-in-out infinite;
}

@keyframes user-title-sparkle {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1) drop-shadow(0 0 3px rgba(255, 215, 0, 0.3));
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.5) drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    }
}

/* 8. 波浪 Wave - 上下浮动 */
span[class*="user-title--"].user-title-effect-wave {
    background: linear-gradient(135deg, #ff00ff 0%, #00ffff 25%, #ffff00 50%, #ff00ff 75%, #00ffff 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographic 15s ease-in-out infinite,
               user-title-wave 3s ease-in-out infinite;
}

@keyframes user-title-wave {
    0%, 100% { transform: translateY(0px); }
    25% { transform: translateY(-4px); }
    50% { transform: translateY(0px); }
    75% { transform: translateY(4px); }
}

/* 9. 3D翻转 3D Rotate - 立体旋转 */
span[class*="user-title--"].user-title-effect-3d {
    background: linear-gradient(135deg, #ff00ff 0%, #00ffff 25%, #ffff00 50%, #ff00ff 75%, #00ffff 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographic 15s ease-in-out infinite,
               user-title-3d 6s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes user-title-3d {
    0% { transform: perspective(500px) rotateY(0deg); }
    25% { transform: perspective(500px) rotateY(90deg); }
    50% { transform: perspective(500px) rotateY(180deg); }
    75% { transform: perspective(500px) rotateY(270deg); }
    100% { transform: perspective(500px) rotateY(360deg); }
}

/* ============================================
 * 新增特效 New Effects (10-20)
 * ============================================ */

/* 10. 霓虹灯 Neon - 蓝紫发光脉冲 */
span[class*="user-title--"].user-title-effect-neon {
    background: linear-gradient(135deg, #00ffff 0%, #ff00ff 50%, #00ffff 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-neon 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.7))
            drop-shadow(0 0 15px rgba(255, 0, 255, 0.5));
}

@keyframes user-title-neon {
    0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.6))
                drop-shadow(0 0 10px rgba(255, 0, 255, 0.4));
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.9))
                drop-shadow(0 0 20px rgba(255, 0, 255, 0.7));
    }
}

/* 11. 等离子 Plasma - 流动能量球 */
span[class*="user-title--"].user-title-effect-plasma {
    background: linear-gradient(45deg, #ff0080 0%, #ff8c00 25%, #40e0d0 50%, #ff0080 75%, #ff8c00 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-plasma 3s ease-in-out infinite;
}

@keyframes user-title-plasma {
    0% { background-position: 0% 50%; filter: brightness(1) contrast(1.2); }
    25% { background-position: 50% 100%; filter: brightness(1.3) contrast(1.1); }
    50% { background-position: 100% 50%; filter: brightness(1) contrast(1.3); }
    75% { background-position: 50% 0%; filter: brightness(1.2) contrast(1); }
    100% { background-position: 0% 50%; filter: brightness(1) contrast(1.2); }
}

/* 12. 极光 Aurora - 北极光渐变 */
span[class*="user-title--"].user-title-effect-aurora {
    background: linear-gradient(120deg, #5b8cff 0%, #73ffd5 30%, #ff6ae6 60%, #ffa26b 100%);
    background-size: 350% 350%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-aurora 8s ease-in-out infinite;
}

@keyframes user-title-aurora {
    0%, 100% {
        background-position: 0% 30%;
        filter: brightness(1.1) saturate(1.2);
    }
    33% {
        background-position: 100% 70%;
        filter: brightness(1.3) saturate(1.4);
    }
    66% {
        background-position: 50% 100%;
        filter: brightness(1) saturate(1.1);
    }
}

/* 13. 电流 Electric - 闪电能量 */
span[class*="user-title--"].user-title-effect-electric {
    background: linear-gradient(135deg, #00ffff 0%, #ffffff 50%, #00ffff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-electric 0.4s steps(5) infinite;
}

@keyframes user-title-electric {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1.5) saturate(2);
        transform: translateX(0px);
    }
    20% {
        background-position: 100% 50%;
        filter: brightness(2) saturate(3);
        transform: translateX(-1px);
    }
    40% {
        background-position: 50% 100%;
        filter: brightness(1) saturate(1.5);
        transform: translateX(1px);
    }
    60% {
        background-position: 100% 0%;
        filter: brightness(1.8) saturate(2.5);
        transform: translateX(-0.5px);
    }
    80% {
        background-position: 0% 100%;
        filter: brightness(1.2) saturate(1.8);
        transform: translateX(0.5px);
    }
}

/* 14. 水晶 Crystal - 棱镜折射 */
span[class*="user-title--"].user-title-effect-crystal {
    background: linear-gradient(60deg, #a8edea 0%, #fed6e3 33%, #d299c2 66%, #a8edea 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-crystal 5s linear infinite;
}

@keyframes user-title-crystal {
    0% {
        background-position: 0% 50%;
        filter: brightness(1.2) hue-rotate(0deg);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.5) hue-rotate(180deg);
    }
    100% {
        background-position: 0% 50%;
        filter: brightness(1.2) hue-rotate(360deg);
    }
}

/* 15. 暗影 Shadow - 深邃黑暗 */
span[class*="user-title--"].user-title-effect-shadow {
    background: linear-gradient(135deg, #434343 0%, #000000 50%, #434343 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-shadow 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

@keyframes user-title-shadow {
    0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)) brightness(0.8);
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5)) brightness(1.2);
    }
}

/* 16. 激光 Laser - 扫描线条 */
span[class*="user-title--"].user-title-effect-laser {
    background: linear-gradient(90deg,
        transparent 0%,
        #ff0000 45%,
        #ffffff 50%,
        #ff0000 55%,
        transparent 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-laser 2s linear infinite;
}

@keyframes user-title-laser {
    0% {
        background-position: -100% 0%;
        filter: brightness(1);
    }
    50% {
        background-position: 0% 0%;
        filter: brightness(2);
    }
    100% {
        background-position: 100% 0%;
        filter: brightness(1);
    }
}

/* 17. 量子 Quantum - 不确定性闪烁 */
span[class*="user-title--"].user-title-effect-quantum {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-quantum 0.8s ease-in-out infinite;
}

@keyframes user-title-quantum {
    0%, 100% {
        opacity: 1;
        transform: scale(1) translateX(0);
        background-position: 0% 50%;
    }
    10% {
        opacity: 0.7;
        transform: scale(0.98) translateX(-1px);
        background-position: 20% 50%;
    }
    30% {
        opacity: 1;
        transform: scale(1.02) translateX(1px);
        background-position: 60% 50%;
    }
    50% {
        opacity: 0.8;
        transform: scale(0.99) translateX(0px);
        background-position: 100% 50%;
    }
    70% {
        opacity: 1;
        transform: scale(1.01) translateX(-0.5px);
        background-position: 40% 50%;
    }
    90% {
        opacity: 0.9;
        transform: scale(1) translateX(0.5px);
        background-position: 80% 50%;
    }
}

/* 18. 宇宙 Cosmic - 星空深邃 */
span[class*="user-title--"].user-title-effect-cosmic {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 25%, #2c5364 50%, #203a43 75%, #0f2027 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-cosmic 10s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

@keyframes user-title-cosmic {
    0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)) brightness(1.2);
    }
    25% {
        background-position: 50% 100%;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) brightness(1.5);
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) brightness(1.3);
    }
    75% {
        background-position: 50% 0%;
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)) brightness(1.4);
    }
}

/* 19. 液态 Liquid - 水波流动 */
span[class*="user-title--"].user-title-effect-liquid {
    background: linear-gradient(45deg, #1cb5e0 0%, #000851 50%, #1cb5e0 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-liquid 4s ease-in-out infinite;
}

@keyframes user-title-liquid {
    0%, 100% {
        background-position: 0% 50%;
        transform: translateY(0px) scaleY(1);
    }
    25% {
        background-position: 50% 100%;
        transform: translateY(-2px) scaleY(1.05);
    }
    50% {
        background-position: 100% 50%;
        transform: translateY(0px) scaleY(0.95);
    }
    75% {
        background-position: 50% 0%;
        transform: translateY(2px) scaleY(1.03);
    }
}

/* 20. 全息图 Hologram - 数字投影 */
span[class*="user-title--"].user-title-effect-hologram {
    background: linear-gradient(135deg, #00d4ff 0%, #ffffff 25%, #00d4ff 50%, #ffffff 75%, #00d4ff 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: user-title-hologram 3s linear infinite;
}

@keyframes user-title-hologram {
    0% {
        background-position: 0% 50%;
        opacity: 0.9;
        filter: brightness(1.2);
    }
    25% {
        background-position: 50% 100%;
        opacity: 1;
        filter: brightness(1.5);
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.85;
        filter: brightness(1.1);
    }
    75% {
        background-position: 50% 0%;
        opacity: 1;
        filter: brightness(1.4);
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.9;
        filter: brightness(1.2);
    }
}

/* ============================================
 * 动画速度控制 Animation Speed Control
 * ============================================ */

/* 注意: 速度会通过JavaScript动态注入 */

/* ==========================================
 * 头像边框特效系统 Avatar Border Effects
 * ========================================== */

/* 基础容器样式 */
.post-avatar {
    position: relative;
    display: inline-block;
}

.main-avatar {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    z-index: 1;
}

.main-avatar img.avatar {
    border-radius: 50%;
    display: block;
}

/* 确保 avatar-flair 显示在最前面 */
.avatar-flair {
    position: relative;
    z-index: 10 !important;
}

/* 特效 1: 旋转光环 (rotating-ring) */
.avatar-effect-rotating-ring .main-avatar::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 0, 128, 0.4),
        rgba(255, 140, 0, 0.4),
        rgba(64, 224, 208, 0.4),
        rgba(147, 112, 219, 0.4),
        rgba(255, 0, 128, 0.4)
    );
    animation: avatar-rotating-ring 3s linear infinite;
    z-index: -1;
    filter: blur(5px);
    opacity: 0.5;
}

.avatar-effect-rotating-ring .main-avatar::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 0, 128, 0.3),
        rgba(255, 140, 0, 0.3),
        rgba(64, 224, 208, 0.3),
        rgba(147, 112, 219, 0.3),
        rgba(255, 0, 128, 0.3)
    );
    animation: avatar-rotating-ring 3s linear infinite reverse;
    z-index: -1;
    opacity: 0.6;
}

@keyframes avatar-rotating-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 特效 2: 呼吸光晕 (breathing-glow) */
.avatar-effect-breathing-glow .main-avatar::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(99, 102, 241, 0.3),
        rgba(168, 85, 247, 0.2),
        transparent
    );
    animation: avatar-breathing-glow 2.5s ease-in-out infinite;
    z-index: -1;
}

.avatar-effect-breathing-glow .main-avatar::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    box-shadow:
        0 0 12px rgba(99, 102, 241, 0.4),
        0 0 24px rgba(168, 85, 247, 0.3),
        inset 0 0 12px rgba(99, 102, 241, 0.15);
    animation: avatar-breathing-glow 2.5s ease-in-out infinite;
    z-index: -1;
}

@keyframes avatar-breathing-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* 特效 3: 粒子环绕 (particle-orbit) - 减弱版本 */
.avatar-effect-particle-orbit .main-avatar {
    position: relative;
    --particle-distance: 32px;
}

.avatar-effect-particle-orbit .main-avatar::before,
.avatar-effect-particle-orbit .main-avatar::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 245, 255, 0.4), rgba(0, 128, 255, 0.3));
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.3);
    z-index: -1;
}

.avatar-effect-particle-orbit .main-avatar::before {
    top: 50%;
    left: 50%;
    animation: avatar-particle-orbit-1 4s linear infinite;
}

.avatar-effect-particle-orbit .main-avatar::after {
    top: 50%;
    left: 50%;
    animation: avatar-particle-orbit-2 4s linear infinite;
}

@keyframes avatar-particle-orbit-1 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(var(--particle-distance, 32px)) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(var(--particle-distance, 32px)) rotate(-360deg);
    }
}

@keyframes avatar-particle-orbit-2 {
    0% {
        transform: translate(-50%, -50%) rotate(180deg) translateX(var(--particle-distance, 32px)) rotate(-180deg);
        background: radial-gradient(circle, rgba(255, 0, 255, 0.4), rgba(255, 0, 128, 0.3));
        box-shadow: 0 0 8px rgba(255, 0, 255, 0.3);
    }
    100% {
        transform: translate(-50%, -50%) rotate(540deg) translateX(var(--particle-distance, 32px)) rotate(-540deg);
        background: radial-gradient(circle, rgba(255, 0, 255, 0.4), rgba(255, 0, 128, 0.3));
        box-shadow: 0 0 8px rgba(255, 0, 255, 0.3);
    }
}

/* 特效 4: 霓虹脉冲 (neon-pulse) - 减弱版本 */
.avatar-effect-neon-pulse .main-avatar {
    position: relative;
}

.avatar-effect-neon-pulse .main-avatar::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.3);
    box-shadow:
        0 0 6px rgba(0, 255, 255, 0.3),
        0 0 12px rgba(0, 255, 255, 0.2),
        inset 0 0 6px rgba(0, 255, 255, 0.2);
    animation: avatar-neon-pulse 1.5s ease-in-out infinite;
    z-index: -1;
}

.avatar-effect-neon-pulse .main-avatar::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 1px solid rgba(255, 0, 255, 0.2);
    box-shadow:
        0 0 8px rgba(255, 0, 255, 0.2),
        0 0 15px rgba(255, 0, 255, 0.1);
    animation: avatar-neon-pulse 1.5s ease-in-out infinite reverse;
    z-index: -1;
    opacity: 0.5;
}

@keyframes avatar-neon-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
        filter: brightness(1);
    }
    50% {
        transform: scale(1.05);
        opacity: 0.5;
        filter: brightness(1.2);
    }
}

/* 特效 5: 渐变边框 (gradient-border) - 减弱版本 */
.avatar-effect-gradient-border .main-avatar {
    position: relative;
    padding: 3px;
    background: linear-gradient(
        45deg,
        rgba(240, 147, 251, 0.6),
        rgba(245, 87, 108, 0.6),
        rgba(255, 209, 64, 0.6),
        rgba(79, 172, 254, 0.6),
        rgba(0, 242, 254, 0.6)
    );
    background-size: 300% 300%;
    border-radius: 50%;
    animation: avatar-gradient-border-flow 4s ease infinite;
}

.avatar-effect-gradient-border .main-avatar img {
    border: 2px solid #1a1a1a;
}

.avatar-effect-gradient-border .main-avatar::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(
        -45deg,
        rgba(240, 147, 251, 0.3),
        rgba(245, 87, 108, 0.3),
        rgba(255, 209, 64, 0.3),
        rgba(79, 172, 254, 0.3)
    );
    background-size: 300% 300%;
    filter: blur(6px);
    animation: avatar-gradient-border-flow 4s ease infinite reverse;
    z-index: -1;
    opacity: 0.5;
}

@keyframes avatar-gradient-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 特效 6: 柔光边框 (soft-glow) */
.avatar-effect-soft-glow .main-avatar::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.15),
        rgba(200, 200, 255, 0.1),
        transparent
    );
    animation: avatar-soft-glow 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes avatar-soft-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.6;
    }
}

/* 特效 7: 水波纹 (ripple) */
.avatar-effect-ripple .main-avatar::before,
.avatar-effect-ripple .main-avatar::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid rgba(100, 150, 255, 0.3);
    animation: avatar-ripple 2.5s ease-out infinite;
    z-index: -1;
}

.avatar-effect-ripple .main-avatar::after {
    animation-delay: 1.25s;
}

@keyframes avatar-ripple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* 特效 8: 星环闪烁 (star-twinkle) */
.avatar-effect-star-twinkle .main-avatar::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 220, 100, 0.3) 45deg,
        transparent 90deg,
        rgba(255, 220, 100, 0.3) 135deg,
        transparent 180deg,
        rgba(255, 220, 100, 0.3) 225deg,
        transparent 270deg,
        rgba(255, 220, 100, 0.3) 315deg,
        transparent 360deg
    );
    animation: avatar-star-twinkle 4s linear infinite;
    z-index: -1;
}

@keyframes avatar-star-twinkle {
    0%, 100% {
        transform: rotate(0deg);
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 特效 9: 淡彩渐变 (pastel-gradient) */
.avatar-effect-pastel-gradient .main-avatar::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(255, 200, 200, 0.3),
        rgba(200, 220, 255, 0.3),
        rgba(220, 255, 220, 0.3),
        rgba(255, 240, 200, 0.3)
    );
    background-size: 300% 300%;
    animation: avatar-pastel-gradient 5s ease infinite;
    z-index: -1;
    filter: blur(3px);
}

@keyframes avatar-pastel-gradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 特效 10: 光点追踪 (light-trace) */
.avatar-effect-light-trace .main-avatar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 200, 255, 0.8), transparent);
    box-shadow: 0 0 8px rgba(150, 200, 255, 0.4);
    animation: avatar-light-trace 3s linear infinite;
    z-index: -1;
}

@keyframes avatar-light-trace {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(30px);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(30px);
        opacity: 0;
    }
}

/* 特效强度控制 */
.avatar-effect-intensity-low .main-avatar::before,
.avatar-effect-intensity-low .main-avatar::after {
    opacity: 0.5;
}

.avatar-effect-intensity-medium .main-avatar::before,
.avatar-effect-intensity-medium .main-avatar::after {
    opacity: 0.75;
}

.avatar-effect-intensity-high .main-avatar::before,
.avatar-effect-intensity-high .main-avatar::after {
    opacity: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .avatar-effect-particle-orbit .main-avatar {
        --particle-distance: 28px;
    }
}

/* 性能优化 */
@media (prefers-reduced-motion: reduce) {
    .main-avatar::before,
    .main-avatar::after {
        animation: none !important;
    }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
    .avatar-effect-gradient-border .main-avatar img {
        border-color: #2a2a2a;
    }
}
`;

    const injectStyle = () => {
        if (typeof GM_addStyle === 'function') {
            GM_addStyle(css);
            return;
        }
        const style = document.createElement('style');
        style.textContent = css;
        document.head.appendChild(style);
    };

    /**
     * 应用用户标题和头像特效
     * @param {Document|Element} root - 根节点
     */
    const applyEffects = (root = document) => {
        // 应用用户标题特效
        const titles = root.querySelectorAll('span[class*="user-title--"]');

        titles.forEach((title) => {
            const storedClass = title.dataset.userTitleEffect;
            let effectClass = storedClass && effectClassNames.includes(storedClass) ? storedClass : undefined;

            if (!effectClass) {
                // 随机模式：每个元素随机选择特效
                if (USE_RANDOM_EFFECT) {
                    effectClass = effectClassNames[Math.floor(Math.random() * effectClassNames.length)];
                } else {
                    // 顺序模式：按顺序循环应用
                    effectClass = effectClassNames[effectCursor % effectClassNames.length];
                    effectCursor += 1;
                }
            }

            if (title.classList.contains(effectClass)) {
                return;
            }

            title.classList.add('user-title-effect');
            title.classList.remove(...effectClassNames);

            title.classList.add(effectClass);
            title.dataset.userTitleEffect = effectClass;

            // 应用速度调节
            if (ANIMATION_SPEED !== 1.0) {
                title.style.animationDuration = `calc(var(--animation-duration, 1s) * ${ANIMATION_SPEED})`;
            }
        });

        // 应用头像边框特效
        if (AVATAR_EFFECT_ENABLED && AVATAR_EFFECT_TYPE !== 'none') {
            applyAvatarEffects(root);
        }
    };

    /**
     * 应用头像边框特效
     * @param {Document|Element} root - 根节点
     */
    const applyAvatarEffects = (root = document) => {
        const avatars = root.querySelectorAll('.post-avatar');

        const AVATAR_EFFECT_TYPES = [
            'none',
            'rotating-ring',
            'breathing-glow',
            'particle-orbit',
            'neon-pulse',
            'gradient-border',
            'soft-glow',
            'ripple',
            'star-twinkle',
            'pastel-gradient',
            'light-trace'
        ];

        avatars.forEach((avatar) => {
            // 根据模式选择特效类型
            let selectedEffect;
            const storedEffect = avatar.dataset.avatarEffect;

            // 如果已有存储的特效且在可用列表中,继续使用
            if (storedEffect && AVATAR_EFFECTS.includes(storedEffect)) {
                selectedEffect = storedEffect;
            } else {
                // 根据模式选择新特效
                switch (AVATAR_EFFECT_MODE) {
                    case 'random':
                        // 随机模式:每个头像随机选择一种特效
                        selectedEffect = AVATAR_EFFECTS[Math.floor(Math.random() * AVATAR_EFFECTS.length)];
                        break;
                    case 'sequential':
                        // 顺序模式:按顺序循环应用特效
                        selectedEffect = AVATAR_EFFECTS[avatarEffectCursor % AVATAR_EFFECTS.length];
                        avatarEffectCursor += 1;
                        break;
                    case 'fixed':
                    default:
                        // 固定模式:所有头像使用配置的特效
                        selectedEffect = AVATAR_EFFECT_TYPE;
                        break;
                }
            }

            // 检查是否需要更新特效
            const currentEffect = avatar.dataset.avatarEffect;
            if (currentEffect === selectedEffect) {
                return;
            }

            // 移除所有现有特效类
            AVATAR_EFFECT_TYPES.forEach(effect => {
                avatar.classList.remove(`avatar-effect-${effect}`);
            });

            // 移除所有强度类
            avatar.classList.remove('avatar-effect-intensity-low');
            avatar.classList.remove('avatar-effect-intensity-medium');
            avatar.classList.remove('avatar-effect-intensity-high');

            // 应用新特效
            if (selectedEffect && selectedEffect !== 'none') {
                avatar.classList.add(`avatar-effect-${selectedEffect}`);
                avatar.classList.add(`avatar-effect-intensity-${AVATAR_EFFECT_INTENSITY}`);
                avatar.dataset.avatarEffect = selectedEffect;
            } else {
                delete avatar.dataset.avatarEffect;
            }
        });
    };

    const init = () => {
        injectStyle();

        const run = () => applyEffects();

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', run, { once: true });
        } else {
            run();
        }

        if (!document.body) {
            return;
        }

        const observer = new MutationObserver((mutations) => {
            const hasAddedNodes = mutations.some(
                (mutation) => mutation.addedNodes && mutation.addedNodes.length > 0
            );

            if (!hasAddedNodes) {
                return;
            }

            requestAnimationFrame(run);
        });

        observer.observe(document.body, { childList: true, subtree: true });
    };

    init();
})();

效果图
PixPin_2025-10-15_16-20-53

ius · 2025 年10 月 15 日 08:17

有没有效果图

9Rebels · 2025 年10 月 15 日 08:19

贴图看看是不是吊炸天

normandy · 2025 年10 月 15 日 08:20

举办了，企鹅眼睛闪瞎了

baitao · 2025 年10 月 15 日 08:22

加上了

Throttle · 2025 年10 月 15 日 08:23

闪瞎我了，赔点钱吧

wcvb13 · 2025 年10 月 15 日 08:24

建议发给始皇加到每一个头衔上，这样不只是自嗨

wilile · 2025 年10 月 15 日 08:24

哇佬有点厉害啊

KXG · 2025 年10 月 15 日 08:24

也把我闪瞎了

明天不 V 我 50 这事说不过去

WIlson · 2025 年10 月 15 日 08:24

感谢佬,用上了

baitao · 2025 年10 月 15 日 08:25

你找始皇说理去,始皇带的头

BraveCalf · 2025 年10 月 15 日 08:27

已经瞎了，赔钱

snk · 2025 年10 月 15 日 08:28

我想要赛博头像

GuYudi · 2025 年10 月 15 日 08:28

给我干哪来了，这还是2025吗？2077社区说是。这种光效看多了眼睛疼。

lurk · 2025 年10 月 15 日 08:30

闪瞎了！

baitao · 2025 年10 月 15 日 08:31

收到,马上端出来

awz707 · 2025 年10 月 15 日 08:31

LangYnn · 2025 年10 月 15 日 08:32

@neo 你看看你干的好事儿。。。

awz707 · 2025 年10 月 15 日 08:33

快进到发帖用BB Code

handsome · 2025 年10 月 15 日 08:40

你玩挺花呀

话题		回复	浏览量
chatgpt网页版橙黄高光主题开发调优软件开发	5	192	2025 年10 月 31 日
新版Gemini 2.5 Pro 05-06 天气卡片测试（提升巨大？）搞七捻三 Gemini , 人工智能	30	3262	2025 年7 月 12 日
[主题分享] 自用 Cherry Studio 主题美化搞七捻三人工智能 , 纯水	6	392	2025 年12 月 19 日
Gemini 3.1 pro 的 SVG 能力独一档的强前沿快讯人工智能	16	1203	2026 年3 月 20 日
【Cherry Studio 深色主题】仿 Gruvbox 风格深色主题，磨砂玻璃效果开发调优人工智能 , CSS , 配置优化 , Cursor	16	925	2025 年11 月 29 日

来吧,始皇想要的赛博社区

相关话题