美化教程｜网站顶部动态灵动岛样式

这是一款给网站顶部增加动态灵动岛样式的美化方案，整体效果类似手机灵动岛通知条：出现时会有缩放动画，右侧波形条也会动态跳动，适合放在网站顶部做提示或欢迎语展示。

代码部署

第一步：自定义 CSS

/* 动态灵动岛美化样式代码 */
.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: white; display: flex; align-items: center; justify-content: space-between; transition: transform 0.4s ease-in-out, height 0.6s ease-in-out, border-radius 0.6s ease-in-out, box-shadow 0.5s ease-in-out, opacity 0.5s ease-in-out; overflow: visible; z-index: 1000; padding-left: 35px; padding-right: 20px; opacity: 0; box-shadow: 0 0px 10px rgba(0, 0, 0, 0.45); flex: 1; white-space: nowrap; }
.dynamic-island.active { transform: translateX(-50%) scale(1); opacity: 1; }
.dynamic-island.inactive { transform: translateX(-50%) scale(0); opacity: 0; }
.island-content { opacity: 0; transition: opacity 0.9s ease-in-out, filter 0.8s ease-in-out; font-weight: bold; flex-grow: 1; text-align: left; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; }
.dynamic-island.active .island-content { opacity: 1; }
.dynamic-island img { position: absolute; left: 5px; width: 20px; height: 20px; object-fit: cover; transition: height 0.8s ease-in-out, width 0.8s ease-in-out, filter 0.8s ease-in-out; }
.dynamic-island:hover { height: 60px; border-radius: 50px; }
.dynamic-island:hover img { width: 30px; height: 30px; }
.bars { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 40px; }
.bar { width: 2px; height: 13px; background-color: green; animation: bounce 1s infinite ease-in-out; animation-direction: alternate; }
@keyframes bounce { 0% { transform: scaleY(0.3); background-color: green; } 50% { transform: scaleY(1); background-color: orange; } 100% { transform: scaleY(0.3); background-color: green; } }

第二步：自定义头部 HTML

<div class="dynamic-island inactive" id="dynamicIsland" style="opacity: 0;">
    <img src="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01lajerM1QbIl9aoHcJ_!!2210123621994.png" alt="通知图标" width="30" height="30">
    <div class="island-content">
        <div class="bars" style="line-height: 50px; margin: 0;">
            <p style="line-height: 50px; margin: 0; font-size: 12px; padding-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">欢迎访问站长论坛</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>
    </div>
</div>

第三步：加入函数逻辑

function add_dynamic_island_script() { ?>
<script type="text/javascript">
window.onload = function() {
  triggerIsland();
  let title;
  const currentUrl = window.location.pathname;
  if (currentUrl.includes('/message/')) {
    document.querySelector('.bars p').innerText = "正在访问消息页面";
  } else if (currentUrl.includes('/user/')) {
    document.querySelector('.bars p').innerText = "欢迎来到用户中心";
  } else if (document.body.classList.contains('home') || document.body.classList.contains('front-page')) {
    document.querySelector('.bars p').innerText = "欢迎来到你的网站";
  } else if (document.body.classList.contains('single')) {
    title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
    document.querySelector('.bars p').innerText = "正在访问：" + title;
  } else {
    document.querySelector('.bars p').innerText = "欢迎来到你的网站";
  }
};
function triggerIsland() {
  const island = document.getElementById('dynamicIsland');
  if (island) { island.style.opacity = 1; island.classList.add('active'); island.classList.remove('inactive'); setTimeout(() => { closeIsland(); }, 4000); }
}
function closeIsland() {
  const island = document.getElementById('dynamicIsland');
  if (island) { island.classList.remove('active'); island.classList.add('inactive'); setTimeout(() => { island.style.opacity = 0; }, 600); }
}
</script>
<?php }
add_action('wp_head', 'add_dynamic_island_script');

这套效果部署完后，进入不同页面时就能显示不同提示信息。如果你要更贴近自己站点，只需要替换图标、欢迎文案以及首页默认提示词即可。