从 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 修改了顶栏颜色的显示方式,这一方法不再有效。