网站/ccs的复古CRT曲面屏效果

Question

好吧，这不是自我推销！！

我目前有一个运行 phpbb 论坛的赛博朋克网站，该网站使用默认的 prosilver 主题，在该主题之上，我有另一个名为 1978 的主题/皮肤，它为网站提供了老式绿色终端的外观。 我想做的是创造像旧显示器一样的弯曲外观。我有一个很酷的复古术语，我用它作为我正在寻找的效果的例子。 （见图）不是线条或闪烁，而是弯曲的外观，因为我想要的是人们能够按 F11，在浏览器上全屏显示，看起来他们正在旧显示器上使用该网站。

我假设我会在整个主体周围或之后设置一个 div 并给它一个类，然后调用一些 css 也许一些 java <-- like I have any idea how that would work..lol what I'm looking for is a starting place? I've found some stuff on codepen but it's not quite what I'm looking for.

有什么想法吗？？

Answer 1

可以用SVG滤镜来完成，问题是每次调整页面大小时，svg参数都必须改变。 这里做了一个演示。仍在为 Github 进行记录和清理。

https://frindestown.duckdns.org/videomator.html

这里是稳定的站点，其他的来来去去。 https://chafalleiro.github.io/retromator/videomator.html