［komari］因为太喜欢守岸人了，所以和ai唠嗑弄了一个ip信息卡

代码↓

<!-- 信息卡/按钮 -->

<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>