从 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
