Hexo 中的 Safari 彩虹效果是如何实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2112 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近用 Hexo 的部署了一个站点，使用的是 NexT 主题。里面有一个彩虹效果，我今天开启了，发现电脑和手机的 Safari 都可以看到这个效果，希望前端大佬来科普一下。

站点地址： https://itren.tech

Hexo

Safari

彩虹

站点

6 条回复 • 2019-12-28 18:41:47 +08:00

U7Q5tLAex2FI0o0g

2019-12-28 18:34:19 +08:00

@media screen and (-webkit-min-device-pixel-ratio: 0)
main.css:2360body::before {
animation: rainbow 15s ease infinite;
background: linear-gradient(124deg, #f00, #ff7f00, #ff0, #7fff00, #0f0, #00ff7f, #0ff, #007fff, #00f, #7f00ff, #f0f, #ff007f, #f00);
background-size: 1000% 1000%;
content: '';
display: block;
height: 100px;
left: 0;
position: fixed;
right: 0;
top: 0;
transform: translateY(-99.99px);
z-index: 1500;
}

看一下就知道了啊

U7Q5tLAex2FI0o0g

2019-12-28 18:37:33 +08:00

还置顶。我不得不怀疑你是来宣传博客的 :滑鸡

EXChen

2019-12-28 18:37:52 +08:00 via iPhone

@littleylv 这个只有 Safari 可以用吗？

EXChen

2019-12-28 18:39:10 +08:00 via iPhone

@littleylv 哈哈，一直做后端，前端小白，不太懂。

EXChen

2019-12-28 18:40:35 +08:00 via iPhone

@littleylv 以前给这个站捐款过，给了好多金币，所以每次发帖都置顶。😅

U7Q5tLAex2FI0o0g

2019-12-28 18:41:47 +08:00

@EXChen #3 光说样式生效的话，Chrome 也是生效的，但是你仔细看定位，顶部高 100 的地方，chrome 浏览器本身的头部不是半透明效果你看不出来而已。
Safari 的头部是半透明的，你打开任何一个网站往上滚动，都可以隐隐约约看到一点网站内容，只不过你这个 position: fixed; 而且高度刚好跟头部一样高，让你产生错觉