这是一款模仿苹果灵动岛一个样式代码,代码是扒的mac站长的一个样式,然后对于灵动岛,里面是比如用户访问哪个页面或者文章分类等,他会调用该页面的标题来欢迎的灵动岛,消息和用户中心我是单独判断的一个样式,话不多说直接上演示!

WordPress子比主题动态灵动岛美化样式代码 第5张插图

跟着我的教程走,不会有问题,一共要改三个地方,一个是CSS样式和子比主题自定义头部HTML代码,还有一个function.php文件,话不多说直接开始。

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>