/* ============================================================ 欧皇徽章 · Lucky Royal Badge ------------------------------------------------------------ 打破现有徽章「矩形胶囊 + 单图标」的常规样式： - 六角形容器 (clip-path)，与所有其他徽章的胶囊/方形显著不同 - 彩虹流光渐变 (旋转的 conic-gradient) 模拟幸运光环 - 双层图标：中央主星 + 周围 4 颗装饰小星 - 柔光脉冲动画 (transform + opacity) - 性能：仅使用 transform / opacity / filter，不触发布局抖动 DOM 结构（服务端输出）： 欧皇 ============================================================ */ /* ---------- 容器：六角形 + 渐变金边 ---------- */ .lucky-royal-badge { position: relative; display: inline-flex; vertical-align: middle; line-height: 1; /* 六边形：左右两竖线 + 上下两斜边 */ clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%); filter: drop-shadow(0 1px 1px rgba(217, 119, 6, 0.35)) drop-shadow(0 0 6px rgba(245, 158, 11, 0.28)); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease; will-change: transform, filter; } .lucky-royal-badge:hover { transform: translateY(-1px) scale(1.04); filter: drop-shadow(0 2px 3px rgba(217, 119, 6, 0.5)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.5)); } /* 统一小徽章尺寸 */ .lucky-royal-badge.lucky-royal-size-sm { padding: 1px 8px 1px 7px; min-width: 44px; } /* ---------- 内层（彩虹流光渐变 + 金色边框） ---------- */ .lucky-royal-clip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; /* 鎏金主体：上金下橙，中心高光 */ background: linear-gradient(180deg, #fde68a 0%, #fbbf24 28%, #f59e0b 55%, #b45309 100%); color: #4c1d05; font-weight: 900; letter-spacing: 0.12em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); } /* 内层金色描边（用 box-shadow 内嵌双层描边） */ .lucky-royal-clip::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 230, 150, 0.85), inset 0 0 0 2px rgba(180, 83, 9, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.5); } /* 流光层：旋转的彩虹 conic-gradient，仅显示在六边形内 */ .lucky-royal-shine { position: absolute; inset: 0; pointer-events: none; background: conic-gradient( from 0deg, rgba(244, 114, 182, 0.0) 0deg, rgba(244, 114, 182, 0.55) 40deg, rgba(168, 85, 247, 0.55) 80deg, rgba(99, 102, 241, 0.55) 120deg, rgba(34, 197, 94, 0.45) 160deg, rgba(250, 204, 21, 0.55) 200deg, rgba(249, 115, 22, 0.55) 240deg, rgba(236, 72, 153, 0.55) 280deg, rgba(168, 85, 247, 0.5) 320deg, rgba(244, 114, 182, 0.0) 360deg); mix-blend-mode: screen; opacity: 0.55; animation: luckyRoyalSpin 4.5s linear infinite; will-change: transform; } @keyframes luckyRoyalSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 柔光呼吸 */ .lucky-royal-clip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.35), transparent 60%); opacity: 0.6; animation: luckyRoyalPulse 2.6s ease-in-out infinite; mix-blend-mode: screen; } @keyframes luckyRoyalPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } } /* ---------- 中央图标与文字 ---------- */ .lucky-royal-inner { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 3px; } .lucky-royal-crown { display: inline-block; width: 0.85em; height: 0.85em; background: radial-gradient(circle at 50% 35%, #fef3c7 0%, #fbbf24 35%, #b45309 70%, #78350f 100%); clip-path: polygon( 0% 100%, 5% 55%, 15% 70%, 25% 30%, 35% 55%, 50% 20%, 65% 55%, 75% 30%, 85% 70%, 95% 55%, 100% 100%, 85% 95%, 15% 95%); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.7)); flex-shrink: 0; position: relative; z-index: 3; } .lucky-royal-text { /* 纯白珐琅文字 + 多层深色描边：在任何颜色流光底上都清晰可读 */ font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 0.08em; color: #ffffff; -webkit-text-fill-color: #ffffff; /* * 三层阴影叠加： * 1. 8 方向深棕/黑描边（保证字与底色分离） * 2. 顶部暖白高光（金属鎏金顶光） * 3. 内层柔光（提升立体感） */ text-shadow: -1px -1px 0 rgba(62, 28, 6, 0.95), 1px -1px 0 rgba(62, 28, 6, 0.95), -1px 1px 0 rgba(62, 28, 6, 0.95), 1px 1px 0 rgba(62, 28, 6, 0.95), 0 -1px 0 rgba(62, 28, 6, 0.95), 0 1px 0 rgba(62, 28, 6, 0.95), -1px 0 0 rgba(62, 28, 6, 0.95), 1px 0 0 rgba(62, 28, 6, 0.95), 0 0 1px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(62, 28, 6, 0.8), 0 0 6px rgba(255, 248, 225, 0.4); padding: 0 1px; position: relative; z-index: 3; white-space: nowrap; } /* ---------- 周围装饰小星 ---------- */ .lucky-royal-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .lucky-royal-star { position: absolute; color: #fff7ed; font-size: 7px; line-height: 1; opacity: 0.95; text-shadow: 0 0 3px rgba(252, 211, 77, 0.95), 0 0 6px rgba(244, 114, 182, 0.6); animation: luckyRoyalTwinkle 2.4s ease-in-out infinite; } .lucky-royal-star::before { content: "\f005"; /* fa-star */ font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; } .lucky-royal-star-1 { top: 6%; left: 8%; animation-delay: 0s; font-size: 6px; } .lucky-royal-star-2 { top: 8%; right: 8%; animation-delay: 0.6s; font-size: 7px; } .lucky-royal-star-3 { bottom: 6%; left: 12%; animation-delay: 1.2s; font-size: 5px; } .lucky-royal-star-4 { bottom: 8%; right: 12%; animation-delay: 1.8s; font-size: 6px; } @keyframes luckyRoyalTwinkle { 0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(15deg); } } /* 尊重用户系统偏好：减少动画 */ @media (prefers-reduced-motion: reduce) { .lucky-royal-shine, .lucky-royal-clip::after, .lucky-royal-star { animation: none !important; } }