前端如何调整网页整体的亮度?

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 1733 days ago, the information mentioned may be changed or developed.

如题,前一段时间看到个挺炫酷的效果,就是有人在网页上做了个拖动条,前后拖动就可以像手机屏幕一样让整个页面里的所有元素变暗或者变亮。这种效果是怎么实现的？

拖动条

网页

炫酷

效果

2 replies • 2021-08-07 22:23:40 +08:00

3dwelcome

Aug 7, 2021 via Android

大概率是 css 里的 filter 滤镜，就和网页整体变黑白一个原理。

xiangyuecn

Aug 7, 2021

var ddd=document.createElement("div");document.body.appendChild(ddd);
ddd.style="position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;background:#000;opacity:1";

setInterval(function(){ddd.style.opacity-=0.01},100);

简单粗暴的一个实现，遮罩层滤光