简易网页版灵动岛

前言

网页版简易灵动岛，默认让他居中在标题上面显示出来可自行根据主题或网页修改

Html代码

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

CSS代码

/* 灵动岛基础样式 */
        .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代码

// 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();

演示图