子比美化-动态灵动岛样式

添加动态灵动岛美化样式代码至自定义 CSS

/* 动态灵动岛美化样式代码 - 最终修复统一字体版 */
.dynamic-island:hover img {
    width: 30px;
    height: 30px;
}

.bars {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}

.bar {
    width: 2px;
    height: 13px;
    background-color: green;
    animation: bounce 1s infinite ease-in-out alternate;
}

.bar:nth-child(1) { animation-duration: 1s; }
.bar:nth-child(2) { animation-duration: 0.9s; }
.bar:nth-child(3) { animation-duration: 0.8s; }
.bar:nth-child(4) { animation-duration: 0.7s; }
.bar:nth-child(5) { animation-duration: 0.6s; }
.bar:nth-child(6) { animation-duration: 0.9s; }
.bar:nth-child(7) { animation-duration: 0.7s; }

.dynamic-island {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    transform-origin: center;
    width: auto;
    max-width: 80%;
    height: 40px;
    background-color: #000;
    border-radius: 25px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    z-index: 1000;
    padding-left: 35px;
    padding-right: 20px;
    opacity: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.45);
}

.dynamic-island.active {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

添加代码至后台自定义头部 HTML

<!-- 动态灵动岛美化样式代码 开始 -->
<div class="dynamic-island inactive" id="dynamicIsland">
    <img src="https://www.ieus.cn/LightPicture/2025/05/245987c1f242e7c0.png" alt="图标" width="20" height="20">
    <div class="island-content">
        <div class="bars">
            <p style="margin: 0; font-size: 12px; padding-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 260px;">欢迎访问至简笔记</p>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>

代码添加到zibll文件夹中的function.php或func.php文件中

// 灵动岛通知 开始
function add_dynamic_island_script() {
    ?>
    <script type="text/javascript">
    window.onload = function() {
        // 触发灵动岛显示
        triggerIsland();

        let title;
        const currentUrl = window.location.pathname;
        const textDom = document.querySelector('.bars p');
        // 元素不存在直接终止，避免报错
        if (!textDom) return;

        if (currentUrl.includes('/message/')) {
            textDom.innerText = "正在访问消息页面";
        } else if (currentUrl.includes('/user/')) {
            textDom.innerText = "欢迎来到用户中心";
        } else if (document.body.classList.contains('home') || document.body.classList.contains('front-page')) {
            // 引号转义 + 改用innerHTML支持链接
            textDom.innerHTML = '欢迎来到<a target="_blank" href="https://yinhenote.cn/tag/%e9%93%b6%e6%b2%b3%e7%ac%94%e8%ae%b0/" title="View all posts in 至简笔记">至简笔记</a>';
        } else if (document.body.classList.contains('single')) {
            title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
            textDom.innerText = "正在访问：" + title;
        } else if (document.body.classList.contains('category')) {
            let category = "<?php 
                $catObj = get_queried_object();
                echo $catObj ? addslashes(html_entity_decode($catObj->name)) : '';
            ?>";
            textDom.innerText = category ? "正在访问：" + category + " 分类" : "浏览分类页面";
        } else if (document.body.classList.contains('page')) {
            title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
            textDom.innerText = "正在访问：" + title;
        } else {
            textDom.innerText = "欢迎来到至简笔记";
        }
    }

    // 触发灵动岛显示
    function triggerIsland() {
        const island = document.getElementById('dynamicIsland');
        if (!island) return;
        // 只操作类名，交给CSS控制样式，不手动改opacity
        island.classList.remove('inactive');
        island.classList.add('active');

        // 4秒后自动关闭
        setTimeout(() => {
            closeIsland();
        }, 4000);
    }

    // 关闭灵动岛
    function closeIsland() {
        const island = document.getElementById('dynamicIsland');
        if (!island) return;
        island.classList.remove('active');
        island.classList.add('inactive');
    }
    </script>
    <?php
}
add_action('wp_head', 'add_dynamic_island_script');
// 灵动岛 结束