代码↓
<style> /* --- 底部小按钮（常驻） --- */ #capsule-toggle-btn { position: fixed; bottom: 24px; right: 24px; z-index: 99999; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } #capsule-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } /* --- 信息胶囊面板（点击按钮后弹出） --- */ #capsule-sidebar { position: fixed; bottom: 80px; right: 16px; z-index: 99998; display: flex; flex-direction: column; padding: 14px 18px; gap: 10px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 500; color: #1d1d1f; font-size: 13px; line-height: 1.4; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(100%) translateY(20px); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } #capsule-sidebar.visible { opacity: 1; visibility: visible; transform: translateX(0) translateY(0); } /* 新增：标题行（地球图标 + “你的IP”） */ .sidebar-header { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin-bottom: 4px; } .sidebar-icon { width: 1.6em; height: 1.6em; color: #007AFF; flex-shrink: 0; } .ip-prefix { font-weight: 600; color: #007AFF; } .info-line { display: flex; align-items: center; gap: 6px; opacity: 0.95; } /* 深色模式适配 */ @media (prefers-color-scheme: dark) { #capsule-toggle-btn, #capsule-sidebar { background: rgba(30, 30, 30, 0.9); border-color: rgba(255, 255, 255, 0.1); color: #f5f5f7; } .sidebar-icon, .ip-prefix { color: #0A84FF; } .sidebar-header { color: #f5f5f7; } } /* 小屏幕适配 */ @media (max-width: 600px) { #capsule-toggle-btn { bottom: 18px; right: 18px; width: 40px; height: 40px; } #capsule-sidebar { bottom: 72px; right: 12px; padding: 12px 16px; font-size: 12.5px; } .sidebar-header { font-size: 14px; } }</style><!-- 底部小按钮 --><div id="capsule-toggle-btn"> <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/> </svg></div><!-- 信息胶囊面板 --><div id="capsule-sidebar"> <!-- 新增标题：地球图标 + “你的IP” --> <div class="sidebar-header"> <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/> </svg> 你的IP </div> <div id="info-content">加载中...</div></div><script> const btn = document.getElementById('capsule-toggle-btn'); const sidebar = document.getElementById('capsule-sidebar'); const content = document.getElementById('info-content'); // 点击按钮切换显示/隐藏 btn.addEventListener('click', () => { sidebar.classList.toggle('visible'); }); // 获取 IP 信息（中文位置） fetch('https://ipwho.is/?lang=zh-CN') .then(res => res.json()) .then(data => { if (data.success !== false) { const isp = data.connection?.isp || data.connection?.org || '未知运营商'; // 智能拼接中文位置 let location = ''; if (data.city) { location += data.city; } if (data.region) { if (location) location += ', '; location += data.region; } if (!location) location = '未知位置'; content.innerHTML = ` <div class="info-line"> <span class="ip-prefix">IP:</span> ${data.ip} </div> <div class="info-line"> <span>位置:</span> ${location} </div> <div class="info-line"> <span>运营商:</span> ${isp} </div> `; } else { content.innerHTML = '网络信息获取失败'; } }) .catch(err => { console.error("Fetch error:", err); content.innerHTML = '网络信息获取失败'; });</script>
评论 (0)