代码↓

<!-- 信息卡/按钮 --><div id="visitor-card" style="    position:fixed;     bottom:24px;     right:24px;     width:50px;     height:50px;    border-radius:50%;     overflow:hidden;    font-family: 'Segoe UI', sans-serif;     z-index:99999;     cursor:pointer;    background: url('https://s2.loli.net/2025/12/08/1JsIGZcOtCVMuLw.gif') center/cover no-repeat;    box-shadow:0 0 12px rgba(0,198,255,0.7), 0 4px 12px rgba(0,0,0,0.25);    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);    display:flex;    flex-direction:column;    justify-content:space-between;">    <!-- 背景光线层 -->    <div id="lines" style="        position:absolute;        top:0; left:0; width:100%; height:100%;        background: repeating-linear-gradient(            45deg,            rgba(0,255,255,0.08),            rgba(0,255,255,0.08) 2px,            transparent 2px,            transparent 6px        );        transform: scale(2);        animation: lineFlow 6s linear infinite;    "></div>    <!-- 内容层 -->    <div id="visitor-info" style="        position:relative;        padding:16px;        box-sizing:border-box;        color:#00f0ff;         font-size:14px;         line-height:1.5;        text-shadow:0 0 6px #000,0 0 8px #00f0ff;        opacity:0;        display:flex;        flex-direction:column;        justify-content:space-between;        height:100%;    ">        <div id="visitor-data"></div>        <div style="text-align:center; font-size:12px; opacity:0.7;">点击信息卡取消信息卡显示</div>    </div></div><style>@keyframes lineFlow {    0% { transform: translate(-50%,-50%) rotate(0deg) scale(2); }    100% { transform: translate(-50%,-50%) rotate(360deg) scale(2); }}</style><script>const card = document.getElementById('visitor-card');const info = document.getElementById('visitor-info');const dataDiv = document.getElementById('visitor-data');let expanded = false;// 获取用户IP信息async function fetchVisitorInfo() {    try {        const res = await fetch('http://demo.ip-api.com/json/?fields=66842623&lang=zh-CN');        const data = await res.json();        if(data.status === "success"){            let locationText = '';            const country = data.country || '';            const region = data.regionName || '';            const city = data.city || '';            const isp = data.isp || '';            if(country && region && city){                if(country === region && region === city){                    locationText = country;                } else if(country === region){                    locationText = `${country} / ${city}`;                } else {                    locationText = `${country}${region ? ' / ' + region : ''}${city ? ' / ' + city : ''}`;                }            } else if(country){                locationText = country;            } else {                locationText = '未知';            }            const now = new Date();            const timeStr = now.toLocaleString();            let infoHtml = `<strong>IP:</strong> ${data.query}<br>                            <strong>位置:</strong> ${locationText}<br>                            <strong>时间:</strong> ${timeStr}`;            if(isp){                infoHtml += `<br><strong>运营商:</strong> ${isp}`;            }            dataDiv.innerHTML = infoHtml;        } else {            dataDiv.innerText = '信息获取失败';        }    } catch(err){        console.error(err);        dataDiv.innerText = '信息获取失败';    }}// 展开卡片async function expandCard() {    await fetchVisitorInfo();    card.style.width = '300px';    card.style.height = '160px';    card.style.borderRadius = '16px';    card.style.bottom = '80px';    info.style.opacity = '1';    expanded = true;}// 收缩回按钮function shrinkCard() {    card.style.width = '50px';    card.style.height = '50px';    card.style.borderRadius = '50%';    card.style.bottom = '24px';    info.style.opacity = '0';    expanded = false;}// 点击切换展开/收缩card.addEventListener('click', async () => {    if(!expanded){        expandCard();    } else {        shrinkCard();    }});// 页面加载自动展开三秒window.addEventListener('load', () => {    expandCard();    setTimeout(() => { shrinkCard(); }, 3000);});</script>