一个关于 Retro Grid 效果研究。
这个网格由远及近的动画，给平面网页增加一点空间错觉。因为 CSS 也能直接实现，在一些老网站上会有一些应用，现在的网站用的就少了。
但是 CSS 实现会有一个显示 BUG：在远处会出现线条闪烁，一般的处理办法使用一个渐变遮挡，但遮挡办法不会太好，因为闪烁出现的原因是网页渲染 1px显示的逻辑会导致这个突然显示突然消失。 意思是，如果你挡了一部分远处的网格，缩小页面（Ctrl + 减号），近一点的线条就也开始闪烁。
DEMO 演示，完整代码 https://github.com/YYsuni/suni-demos
尝试解决
第一个想到的是调整参数。
调整倾斜角度，让远处线条大一点，避免出现 1px bug，但是只能减少不能避免。角度这样就只能更小的选择。
调整线条宽度，这样也可以优化问题，但是线条变粗有时不是页面实现想要的效果。
第二个想到的办法是 SVG 实现。
SVG 在 UI 实现上有更好的缩放效果，但是经过尝试，并不能解决 1px bug 问题。
3D 画布
ThreeJS 实现这个效果呢，DEMO 演示（第二个）。
1px 闪烁问题就会解决，效果就会好很多，遮挡也可以改为 three 的 雾气效果。
实现方式有两种：一是直接画线条，二是 gridHelper。girdHelper 不能更改宽高，但是可以通过缩放实现。
其它网格效果
第一个想到的是一个地形效果，镜头在山地里前进。实际尝试下来效果不好，因为地形会让网格变乱，给网站带来一些负面效果。
第二个就是将方格变为圆环，保持了感觉整洁的效果，或许用得上。DEMO 演示（第三个）。
第三就是简单的穿梭效果。 codepen 里有 wormhole 的效果，那个放在页面设计上可能有点抢眼。
这些的实现源码：https://github.com/YYsuni/suni-demos