用 HTML/CSS/JS 给网页加一个简易灵动岛提示-星海夜航

手机上的灵动岛通知挺好认，网页上也可以仿一个：顶部中间弹出一个小黑条，显示一句提示，停留一两秒再缩回去。总共三段代码，HTML 放结构、CSS 放样式和动画、JS 控制显隐，任何页面都能塞。

结构：一个容器一句文案

<div class="dynamic-island" id="dynamicIsland">
        <div class="island-content">
            您有一条新的消息
        </div>
    </div>

position: fixed 把它钉在视口顶部中间，默认透明度 0、向上偏移 20px，等于藏起来；圆角 25px 做出胶囊形状，z-index 9999 保证盖在页面内容上面。弹出动画靠 .pop-in 这个类切换，另外用 media query 给窄屏缩小了宽高：

/* 灵动岛基础样式 */
        .dynamic-island {
            position: fixed;
            top: 3px;
            left: 50%;
            transform: translateX(-50%) translateY(-20px);
            width: 120px;
            height: 35px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            border-radius: 25px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            z-index: 9999;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* 灵动岛内容 */
        .island-content {
            font-size: 12px;
            padding: 0 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 弹出动画 */
        .dynamic-island.pop-in {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
            .dynamic-island {
                width: 100px;
                height: 30px;
                top: 10px;
            }
        }

交互：弹出、停留、移除

JS 里先把元素重置成隐藏状态，读一次 offsetWidth 强制浏览器重绘（不加这一步 transition 可能不生效），100ms 后放大淡入，1.5 秒后上移淡出，最后直接 remove 掉节点。想多次触发就在函数里重建元素：

// 1. 定义灵动岛效果函数
function showDynamicIsland() {
    // 确保元素存在
    let dynamicIsland = document.getElementById('dynamicIsland');

    // 重置状态
    dynamicIsland.style.opacity = '0';
    dynamicIsland.style.transform = 'translateX(-50%) scale(0.8)';
    dynamicIsland.style.transition = 'opacity 0.3s, transform 0.3s';
    
    // 强制重绘
    void dynamicIsland.offsetWidth;
    
    // 添加弹出特效
    setTimeout(function() {
        dynamicIsland.style.opacity = '1';
        dynamicIsland.style.transform = 'translateX(-50%) scale(1)';
    }, 100);
    
    // 3秒后淡出消失
    setTimeout(function() {
        dynamicIsland.style.opacity = '0';
        dynamicIsland.style.transform = 'translateX(-50%) translateY(-20px)';
        
        // 完全移除元素
        setTimeout(function() {
            dynamicIsland.remove();
        }, 500);
    }, 1500);
}
showDynamicIsland();