/** * 称号等级系统 - 徽章生成器 * 版本: 1.0.0 * 作者: 系统开发团队 * 描述: 提供完整的徽章生成功能,包含动画效果和样式 */ (function(global) { 'use strict'; // 检查是否已经加载过 if (global.RankBadgeGenerator) { return; } /** * 动态注入CSS样式 */ function injectStyles() { // 检查是否已经注入过样式 if (document.getElementById('rank-badge-styles')) { return; } const style = document.createElement('style'); style.id = 'rank-badge-styles'; style.textContent = ` /* 称号等级系统样式 */ .rank-item { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.3s ease; } .rank-item:hover { transform: translateY(-5px); } .rank-badge { width: 128px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 0 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3); margin-bottom: 15px; } .rank-badge::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent); animation: shine 3s infinite; } .rank-text { font-size: 12px; font-weight: 900; z-index: 2; position: relative; letter-spacing: 0.5px; } .rank-info { text-align: center; color: white; } .rank-name { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .rank-score { font-size: 12px; opacity: 0.8; } /* 坚韧黑铁 - 呼吸效果 */ .rank-1 { background: linear-gradient(45deg, #2c3e50, #34495e); border: 2px solid #95a5a6; box-shadow: 0 0 10px rgba(149, 165, 166, 0.3); animation: breathe 3s ease-in-out infinite; } .rank-1 .rank-text { color: #ecf0f1; text-shadow: 2px 2px 4px rgba(0,0,0,0.9), 0 0 8px #95a5a6; } /* 英勇黄铜 - 光扫描效果 */ .rank-2 { background: linear-gradient(45deg, #b7950b, #f39c12); border: 2px solid #f1c40f; box-shadow: 0 0 20px rgba(241, 196, 15, 0.4); animation: bronzeGlow 2s ease-in-out infinite; } .rank-2 .rank-text { color: #ffffff; text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 12px #f1c40f; font-weight: 900; animation: bronzeTextGlow 2s ease-in-out infinite; } .rank-2::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(241, 196, 15, 0.3), transparent); animation: bronzeScan 3s infinite; } /* 不屈白银 - 光扫描效果 */ .rank-3 { background: linear-gradient(45deg, #85929e, #d5dbdb); border: 2px solid #f8f9fa; box-shadow: 0 0 25px rgba(248, 249, 250, 0.5); position: relative; animation: silverGlow 2.5s ease-in-out infinite; } .rank-3::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(248, 249, 250, 0.4), transparent); animation: silverScan 3.5s infinite; } .rank-3 .rank-text { color: #2c3e50; text-shadow: 3px 3px 6px rgba(255,255,255,0.8), 0 0 12px #f8f9fa; font-weight: 900; animation: silverTextGlow 2.5s ease-in-out infinite; } /* 荣耀黄金 - 光扫描效果 */ .rank-4 { background: linear-gradient(45deg, #b7950b, #f1c40f); border: 2px solid #fff3cd; box-shadow: 0 0 30px rgba(241, 196, 15, 0.6); animation: goldGlow 2s ease-in-out infinite; } .rank-4 .rank-text { color: #ffffff; text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 15px #fff3cd; font-weight: 900; animation: goldTextGlow 2s ease-in-out infinite; } .rank-4::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 243, 205, 0.4), transparent); animation: goldScan 3s infinite; } /* 华贵铂金 - 光扫描效果 */ .rank-5 { background: linear-gradient(45deg, #5d6d7e, #aeb6bf); border: 2px solid #d5dbdb; box-shadow: 0 0 35px rgba(213, 219, 219, 0.7); animation: platinumGlow 2s ease-in-out infinite; } .rank-5 .rank-text { color: #ffffff; text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 18px #d5dbdb; font-weight: 900; animation: platinumTextGlow 2s ease-in-out infinite; } .rank-5::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(213, 219, 219, 0.4), transparent); animation: platinumScan 2.5s infinite; } /* 璀璨钻石 - 闪烁爆发 */ .rank-6 { background: linear-gradient(45deg, #1abc9c, #16a085); border: 2px solid #a3e4d7; box-shadow: 0 0 40px rgba(163, 228, 215, 0.8); animation: sparkle 1.5s ease-in-out infinite; } .rank-6 .rank-text { color: #ffffff; text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 20px #a3e4d7, 0 0 30px #1abc9c; font-weight: 900; animation: sparkleText 1.5s ease-in-out infinite; } .rank-6::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: conic-gradient(#1abc9c, #a3e4d7, #16a085, #1abc9c); border-radius: 21px; z-index: -1; animation: diamondSpin 2s linear infinite; } .rank-6::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: #a3e4d7; border-radius: 50%; transform: translate(-50%, -50%); animation: sparkBurst 1.5s ease-out infinite; box-shadow: 0 0 10px #a3e4d7; } /* 超凡大师 - 魔法脉冲 */ .rank-7 { background: linear-gradient(45deg, #8e44ad, #9b59b6); border: 2px solid #d7bde2; box-shadow: 0 0 45px rgba(215, 189, 226, 0.9); animation: magicPulse 1.2s ease-in-out infinite; } .rank-7 .rank-text { color: #ffffff; text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 25px #d7bde2, 0 0 35px #8e44ad; font-weight: 900; animation: magicTextGlow 1.2s ease-in-out infinite; } .rank-7::before { content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; background: conic-gradient(#8e44ad, #d7bde2, #9b59b6, #8e44ad); border-radius: 22px; z-index: -1; animation: magicRotate 2s linear infinite; } .rank-7::after { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; background: radial-gradient(circle, transparent 70%, #d7bde2 70%, #d7bde2 80%, transparent 80%); border-radius: 24px; z-index: -1; animation: magicOrbit 3s linear infinite; } /* 傲世宗师 - 烈焰风暴 */ .rank-8 { background: linear-gradient(45deg, #e74c3c, #c0392b); border: 2px solid #fadbd8; box-shadow: 0 0 60px rgba(250, 219, 216, 1.2), 0 0 100px rgba(231, 76, 60, 0.6); animation: magicPulse 1.2s ease-in-out infinite; } .rank-8 .rank-text { color: #ffffff; text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 40px #fadbd8, 0 0 60px #e74c3c, 0 0 80px #c0392b; font-weight: 900; animation: magicTextGlow 1.2s ease-in-out infinite; } .rank-8::before { content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; background: conic-gradient(#ff6b6b, #d73643, #ff4757, #ff6b6b); border-radius: 22px; z-index: -1; animation: magicRotate 2s linear infinite; } .rank-8::after { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; background: radial-gradient(circle, transparent 50%, #ff6b6b 50%, #ff6b6b 60%, transparent 60%); border-radius: 24px; z-index: -1; animation: magicOrbit 3s linear infinite; } /* 最强王者 - 终极效果 */ .rank-9 { background: linear-gradient(45deg, #f39c12, #e67e22, #d35400); border: 3px solid #fdeaa7; box-shadow: 0 0 50px rgba(253, 234, 167, 0.9), 0 0 100px rgba(243, 156, 18, 0.5); animation: pulse 0.8s infinite alternate, rainbow 4s linear infinite; } .rank-9 .rank-text { color: #ffffff; text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 35px #fdeaa7, 0 0 50px #f39c12, 0 0 70px #e67e22; font-weight: 900; animation: textGlow 2s infinite alternate; } .rank-9::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: linear-gradient(45deg, #f39c12, #e67e22, #d35400, #f39c12); border-radius: 21px; z-index: -1; animation: rotate 1s linear infinite; } /* 动画定义 */ @keyframes shine { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 50% { transform: translateX(100%) translateY(100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes breathe { 0% { transform: scale(1); box-shadow: 0 0 10px rgba(149, 165, 166, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(149, 165, 166, 0.6); } 100% { transform: scale(1); box-shadow: 0 0 10px rgba(149, 165, 166, 0.3); } } @keyframes bronzeGlow { 0% { box-shadow: 0 0 20px rgba(241, 196, 15, 0.4); } 50% { box-shadow: 0 0 35px rgba(241, 196, 15, 0.8); } 100% { box-shadow: 0 0 20px rgba(241, 196, 15, 0.4); } } @keyframes bronzeTextGlow { 0% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 12px #f1c40f; } 50% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 20px #f1c40f, 0 0 30px #f39c12; } 100% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 12px #f1c40f; } } @keyframes bronzeScan { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes silverGlow { 0% { box-shadow: 0 0 25px rgba(248, 249, 250, 0.5); } 50% { box-shadow: 0 0 40px rgba(248, 249, 250, 0.9); } 100% { box-shadow: 0 0 25px rgba(248, 249, 250, 0.5); } } @keyframes silverScan { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes silverTextGlow { 0% { text-shadow: 3px 3px 6px rgba(255,255,255,0.8), 0 0 12px #f8f9fa; } 50% { text-shadow: 3px 3px 6px rgba(255,255,255,0.8), 0 0 25px #f8f9fa, 0 0 35px #d5dbdb; } 100% { text-shadow: 3px 3px 6px rgba(255,255,255,0.8), 0 0 12px #f8f9fa; } } @keyframes goldGlow { 0% { box-shadow: 0 0 30px rgba(241, 196, 15, 0.6); } 50% { box-shadow: 0 0 50px rgba(241, 196, 15, 1.0); } 100% { box-shadow: 0 0 30px rgba(241, 196, 15, 0.6); } } @keyframes goldTextGlow { 0% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 15px #fff3cd; } 50% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 30px #fff3cd, 0 0 40px #f1c40f; } 100% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 15px #fff3cd; } } @keyframes goldScan { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes platinumGlow { 0% { box-shadow: 0 0 35px rgba(213, 219, 219, 0.7); } 50% { box-shadow: 0 0 55px rgba(213, 219, 219, 1.1); } 100% { box-shadow: 0 0 35px rgba(213, 219, 219, 0.7); } } @keyframes platinumTextGlow { 0% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 18px #d5dbdb; } 50% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 35px #d5dbdb, 0 0 45px #aeb6bf; } 100% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 18px #d5dbdb; } } @keyframes platinumScan { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes sparkle { 0% { transform: scale(1); box-shadow: 0 0 40px rgba(163, 228, 215, 0.8); } 50% { transform: scale(1.02); box-shadow: 0 0 60px rgba(163, 228, 215, 1.2); } 100% { transform: scale(1); box-shadow: 0 0 40px rgba(163, 228, 215, 0.8); } } @keyframes sparkleText { 0% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 20px #a3e4d7, 0 0 30px #1abc9c; } 50% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 30px #a3e4d7, 0 0 40px #1abc9c, 0 0 50px #16a085; } 100% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 20px #a3e4d7, 0 0 30px #1abc9c; } } @keyframes diamondSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes sparkBurst { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(3); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(5); opacity: 0; } } @keyframes magicPulse { 0% { transform: scale(1); box-shadow: 0 0 45px rgba(215, 189, 226, 0.9); } 50% { transform: scale(1.03); box-shadow: 0 0 80px rgba(215, 189, 226, 1.5); } 100% { transform: scale(1); box-shadow: 0 0 45px rgba(215, 189, 226, 0.9); } } @keyframes magicTextGlow { 0% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 25px #d7bde2, 0 0 35px #8e44ad; } 50% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 40px #d7bde2, 0 0 60px #8e44ad, 0 0 80px #9b59b6; } 100% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 25px #d7bde2, 0 0 35px #8e44ad; } } @keyframes magicRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes magicOrbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes pulse { 0% { box-shadow: 0 0 20px rgba(255,255,255,0.3); } 100% { box-shadow: 0 0 40px rgba(255,255,255,0.6); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } @keyframes textGlow { 0% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 18px #d5dbdb; } 50% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 30px #d5dbdb, 0 0 40px #aeb6bf; } 100% { text-shadow: 3px 3px 6px rgba(0,0,0,0.9), 0 0 18px #d5dbdb; } } `; document.head.appendChild(style); } /** * 称号等级系统徽章生成器类 */ class RankBadgeGenerator { constructor() { // 称号数据配置 this.rankData = { 1: { name: '坚韧黑铁', scoreRange: '0 - 20 积分' }, 2: { name: '英勇黄铜', scoreRange: '20–59 积分' }, 3: { name: '不屈白银', scoreRange: '60–159 积分' }, 4: { name: '荣耀黄金', scoreRange: '160–3999 积分' }, 5: { name: '华贵铂金', scoreRange: '4000 - 4999 积分' }, 6: { name: '璀璨钻石', scoreRange: '5000 - 5999 积分' }, 7: { name: '超凡大师', scoreRange: '6000 - 6999 积分' }, 8: { name: '傲世宗师', scoreRange: '7000 - 7999 积分' }, 9: { name: '最强王者', scoreRange: '8000+ 积分' } }; // 自动注入样式 injectStyles(); } /** * 根据ID获取徽章HTML元素 * @param {number} id - 徽章ID (1-9) * @returns {HTMLElement|null} 返回包含动画效果的徽章元素 */ getBadgeById(id) { if (!this.isValidId(id)) { console.error(`无效的徽章ID: ${id},请传入1-9之间的数字`); return null; } const rankInfo = this.rankData[id]; // 创建徽章容器 const badgeContainer = document.createElement('div'); badgeContainer.className = 'rank-item'; // 创建徽章元素 const badge = document.createElement('div'); badge.className = `rank-badge rank-${id}`; // 创建徽章文本 const badgeText = document.createElement('div'); badgeText.className = 'rank-text'; badgeText.textContent = rankInfo.name; // 创建徽章信息 const rankInfoDiv = document.createElement('div'); rankInfoDiv.className = 'rank-info'; const rankName = document.createElement('div'); rankName.className = 'rank-name'; rankName.textContent = rankInfo.name; const rankScore = document.createElement('div'); rankScore.className = 'rank-score'; rankScore.textContent = rankInfo.scoreRange; // 组装元素 badge.appendChild(badgeText); rankInfoDiv.appendChild(rankName); rankInfoDiv.appendChild(rankScore); badgeContainer.appendChild(badge); badgeContainer.appendChild(rankInfoDiv); return badgeContainer; } /** * 仅获取徽章部分(不包含信息文本) * @param {number} id - 徽章ID (1-9) * @returns {HTMLElement|null} 返回纯徽章元素 */ getBadgeOnly(id) { if (!this.isValidId(id)) { console.error(`无效的徽章ID: ${id},请传入1-9之间的数字`); return null; } const rankInfo = this.rankData[id]; // 创建徽章元素 const badge = document.createElement('div'); badge.className = `rank-badge rank-${id}`; // 创建徽章文本 const badgeText = document.createElement('div'); badgeText.className = 'rank-text'; badgeText.textContent = rankInfo.name; badge.appendChild(badgeText); return badge; } /** * 获取徽章信息(不包含HTML元素) * @param {number} id - 徽章ID (1-9) * @returns {Object|null} 返回徽章信息对象 */ getBadgeInfo(id) { if (!this.isValidId(id)) { console.error(`无效的徽章ID: ${id},请传入1-9之间的数字`); return null; } return { id: id, name: this.rankData[id].name, scoreRange: this.rankData[id].scoreRange, className: `rank-${id}` }; } /** * 根据积分获取对应的徽章ID * @param {number} score - 积分值 * @returns {number} 对应的徽章ID */ getBadgeIdByScore(score) { if (score < 1000) return 1; if (score < 2000) return 2; if (score < 3000) return 3; if (score < 4000) return 4; if (score < 5000) return 5; if (score < 6000) return 6; if (score < 7000) return 7; if (score < 8000) return 8; return 9; } /** * 根据积分直接获取徽章元素 * @param {number} score - 积分值 * @returns {HTMLElement|null} 徽章元素 */ getBadgeByScore(score) { const id = this.getBadgeIdByScore(score); return this.getBadgeById(id); } /** * 验证ID是否有效 * @param {number} id - 要验证的ID * @returns {boolean} 是否有效 */ isValidId(id) { return Number.isInteger(id) && id >= 1 && id <= 9; } /** * 获取所有徽章信息 * @returns {Array} 所有徽章信息数组 */ getAllBadgeInfo() { return Object.keys(this.rankData).map(id => this.getBadgeInfo(parseInt(id))); } /** * 重新注入样式(用于样式丢失时) */ reinjectStyles() { const existingStyle = document.getElementById('rank-badge-styles'); if (existingStyle) { existingStyle.remove(); } injectStyles(); } } // 创建全局实例 const rankBadgeGenerator = new RankBadgeGenerator(); // 导出到全局作用域 global.RankBadgeGenerator = RankBadgeGenerator; global.rankBadgeGenerator = rankBadgeGenerator; // 便捷方法 global.getBadgeById = function(id) { return rankBadgeGenerator.getBadgeById(id); }; global.getBadgeOnly = function(id) { return rankBadgeGenerator.getBadgeOnly(id); }; global.getBadgeInfo = function(id) { return rankBadgeGenerator.getBadgeInfo(id); }; global.getBadgeByScore = function(score) { return rankBadgeGenerator.getBadgeByScore(score); }; global.getBadgeIdByScore = function(score) { return rankBadgeGenerator.getBadgeIdByScore(score); }; // 模块化支持 if (typeof module !== 'undefined' && module.exports) { module.exports = { RankBadgeGenerator, rankBadgeGenerator, getBadgeById: global.getBadgeById, getBadgeOnly: global.getBadgeOnly, getBadgeInfo: global.getBadgeInfo, getBadgeByScore: global.getBadgeByScore, getBadgeIdByScore: global.getBadgeIdByScore }; } // AMD支持 if (typeof define === 'function' && define.amd) { define(function() { return { RankBadgeGenerator, rankBadgeGenerator, getBadgeById: global.getBadgeById, getBadgeOnly: global.getBadgeOnly, getBadgeInfo: global.getBadgeInfo, getBadgeByScore: global.getBadgeByScore, getBadgeIdByScore: global.getBadgeIdByScore }; }); } // 初始化完成提示 console.log('🏆 称号等级系统徽章生成器已加载'); console.log('使用方法:'); console.log('1. getBadgeById(id) - 获取完整徽章(包含信息)'); console.log('2. getBadgeOnly(id) - 仅获取徽章部分'); console.log('3. getBadgeInfo(id) - 获取徽章信息'); console.log('4. getBadgeByScore(score) - 根据积分获取徽章'); console.log('5. getBadgeIdByScore(score) - 根据积分获取徽章ID'); })(typeof window !== 'undefined' ? window : this);