Safari 顶栏彩虹效果

发表于 分类于 Disqus： 本文字数： 225 阅读时长 ≈ 1 分钟

从 OS X Yosemite 系统开始，Safari 浏览器的顶部工具栏加入了类似 iOS 中的半透明毛玻璃效果。Safari 会自动根据页面的颜色来显示工具栏的毛玻璃特效颜色，而通过 CSS 中的 body:before 类，我们可以对其进行定制。具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    body:before {
        right: 0;
        top: 0;
        left: 0;
        height: 100px;
        z-index: 2147483647;
        position: fixed;
        content: "";
        display: block;
        -webkit-transform: translateY(-99.99px);
        background: linear-gradient(124deg,
        #FF0000,
        #FF7F00,
        #FFFF00,
        #7FFF00,
        #00FF00,
        #00FF7F,
        #00FFFF,
        #007FFF,
        #0000FF,
        #7F00FF,
        #FF00FF,
        #FF007F,
        #FF0000);
        animation: rainbow 15s ease infinite;
        background-size: 1000% 1000%;
    }
}
@keyframes rainbow {
    0% {
        background-position: 0% 80%;
    }
    50% {
        background-position: 100% 20%;
    }
    100% {
        background-position: 0% 80%;
    }
}

将它们添加到页面中的 <style> 标签内，并在 <body> 中加入适当的内容。当使用 Safari 浏览器打开时，略微向下滚动页面，便可以看到顶部栏出现炫酷的彩虹效果。快去试试吧！
注意：一些老旧浏览器不能正确识别 transform，会导致彩色条挡住 <body>，-webkit-min-device-pixel-ratio 可以防止这一问题。
GitHub 项目地址：rainbowsafari

本文更新于 2021 年 9 月 22 日：
Safari 15.0 修改了顶栏颜色的显示方式，这一方法不再有效。