子比美化 – 为网站添加一个动态灵动岛

1
/* 动态灵动岛美化样式代码*/
2
.dynamic-island {
3
    position: fixed;
4
    top: 80px;
5
    left: 50%;
6
    transform: translateX(-50%) scale(0);
7
    transform-origin: center;
8
    width: auto; /* 自动宽度 */
9
    max-width: 80%; /* 最大宽度限制 */
10
    height: 40px;
11
    background-color: #000;
12
    border-radius: 25px;
13
    color: white;
14
    display: flex;
15
    align-items: center;
16
    justify-content: space-between;
17
    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;
18
    overflow: visible;
19
    z-index: 1000;
20
    padding-left: 35px;
21
    padding-right: 20px;
22
    opacity: 0;
23
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.45);
24
    flex: 1; /* 使宽度自动扩展 */
25
    white-space: nowrap; /* 防止文字换行 */
26
}
27

28
.dynamic-island.active {
29
    transform: translateX(-50%) scale(1);
30
    opacity: 1;
31
}
32

33
.dynamic-island.inactive {
34
    transform: translateX(-50%) scale(0);
35
    opacity: 0;
36
}
37

38
.island-content {
39
    opacity: 0;
40
    transition: opacity 0.9s ease-in-out, filter 0.8s ease-in-out;
41
    font-weight: bold;
42
    flex-grow: 1;
43
    text-align: left; /* 文字左对齐 */
44
    margin-left: 10px; /* 与图片留出空间 */
45
    overflow: hidden; /* 防止溢出 */
46
    text-overflow: ellipsis; /* 溢出显示省略号 */
47
}
48

49
.dynamic-island.active .island-content {
50
    opacity: 1;
51
}
52

53
.dynamic-island img {
54
    position: absolute;
55
    left: 5px; /* 调整图片位置 */
56
    width: 20px;
57
    height: 20px;
58
    object-fit: cover;
59
    transition: height 0.8s ease-in-out, width 0.8s ease-in-out, filter 0.8s ease-in-out;
60
}
61

62
.dynamic-island:hover {
63
    height: 60px;
64
    border-radius: 50px;
65
}
66

67
.dynamic-island:hover img {
68
    width: 30px;
69
    height: 30px;
70
}
71

72
.bars {
73
    display: flex;
74
    align-items: center;
75
    justify-content: flex-end;
76
    gap: 3px;
77
    min-width: 40px; /* 最小宽度限制 */
78
}
79

80
.bar {
81
    width: 2px;
82
    height: 13px;
83
    background-color: green;
84
    animation: bounce 1s infinite ease-in-out;
85
    animation-direction: alternate;
86
}
87

88
.bar:nth-child(1) {
89
    animation-duration: 1s;
90
}
91

92
.bar:nth-child(2) {
93
    animation-duration: 0.9s;
94
}
95

96
.bar:nth-child(3) {
97
    animation-duration: 0.8s;
98
}
99

100
.bar:nth-child(4) {
101
    animation-duration: 0.7s;
102
}
103

104
.bar:nth-child(5) {
105
    animation-duration: 0.6s;
106
}
107

108
.bar:nth-child(6) {
109
    animation-duration: 0.9s;
110
}
111

112
.bar:nth-child(7) {
113
    animation-duration: 0.7s;
114
}
115

116
@keyframes bounce {
117
    0% {
118
        transform: scaleY(0.3);
119
        background-color: green;
120
    }
121
    50% {
122
        transform: scaleY(1);
123
        background-color: orange;
124
    }
125
    100% {
126
        transform: scaleY(0.3);
127
        background-color: green;
128
    }
129
}
130
/* 动态灵动岛美化样式代码 结束*/

1
<!-- 动态灵动岛美化样式代码 开始 !-->
2
<div class="dynamic-island inactive" id="dynamicIsland" style="opacity: 0;">
3

4
    <img src="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01lajerM1QbIl9aoHcJ_!!2210123621994.png" alt="通知图标" width="30" height="30">
5

6
    <div class="island-content">
7

8
        <div class="bars" style="line-height: 50px; margin: 0;">
9

10
            <p style="line-height: 50px; margin: 0; font-size: 12px; padding-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> 欢迎访问站长论坛</p>
11

12
            <div class="bar"></div>
13

14
            <div class="bar"></div>
15

16
            <div class="bar"></div>
17

18
            <div class="bar"></div>
19

20
            <div class="bar"></div>
21

22
            <div class="bar"></div>
23

24
            <div class="bar"></div>
25

26
        </div>
27

28
    </div>
29

30
</div>
31
<!-- 动态灵动岛美化样式代码 结束 !-->

1
// 灵动岛通知 开始
2
function add_dynamic_island_script() {
3
  ?>
4
      <script type="text/javascript">
5
          window.onload = function() {
6
    // 触发灵动岛的显示
7
    triggerIsland();
8
    // 获取当前页面的标题
9
    let title;
10
    const currentUrl = window.location.pathname;
11
    // 获取当前 URL 路径
12
    if (currentUrl.includes('/message/')) {
13
      // 如果访问了消息页面
14
      document.querySelector('.bars p').innerText = "正在访问消息页面";
15
    } else if (currentUrl.includes('/user/')) {
16
      // 如果访问了用户中心页面
17
      document.querySelector('.bars p').innerText = "欢迎来到用户中心";
18
    } else if (document.body.classList.contains('home') || document.body.classList.contains('front-page')) {
19
      // 如果是首页
20
      document.querySelector('.bars p').innerText = "欢迎来到<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>";
21
    } else if (document.body.classList.contains('single')) {
22
      // 如果是单篇文章
23
      title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
24
      // 获取文章标题并解码
25
      document.querySelector('.bars p').innerText = "正在访问：" + title;
26
    } else if (document.body.classList.contains('category')) {
27
      // 如果是分类页面
28
      const category = "<?php echo addslashes(html_entity_decode(get_queried_object()->name)); ?>";
29
      // 获取当前分类的名称
30
      document.querySelector('.bars p').innerText = "正在访问：" + category + " 分类";
31
    } else if (document.body.classList.contains('page')) {
32
      // 如果是单个页面
33
      title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
34
      // 获取页面标题并解码
35
      document.querySelector('.bars p').innerText = "正在访问：" + title;
36
    } else {
37
      // 如果以上都不匹配，可以使用默认值
38
      document.querySelector('.bars p').innerText = "欢迎来到极客指北";
39
    }
40
  }
41
  ;
42
  // 触发灵动岛的显示
43
  function triggerIsland() {
44
    const island = document.getElementById('dynamicIsland');
45
    if (island) {
46
      island.style.opacity = 1;
47
      island.classList.add('active')
48
                      island.classList.remove('inactive');
49
      // 在4秒后触发关闭动画
50
      setTimeout(() => {
51
        closeIsland();
52
      }
53
      , 4000);
54
    }
55
  }
56
  function closeIsland() {
57
    const island = document.getElementById('dynamicIsland')
58
                if (island) {
59
      island.classList.remove('active');
60
      island.classList.add('inactive');
61
      setTimeout(() => {
62
        island.style.opacity = 0;
63
        // 使灵动岛透明
64
      }
65
      , 600);
66
      // 与 transform 动画持续时间一致
67
    }
68
  }
69
  </script>
70
      <?php
71
}
72
add_action('wp_head', 'add_dynamic_island_script');
73
// 灵动岛 结束