可视化大屏基本就是数据可视化，主题多为科技感为主。下面分享一些也许对你有用的css效果，都是比较简单的，如果后面有别的还会更新。

比如下面这种刻度

目的是实现镜头旋转时，上半部和下半部的刻度逐渐消失，只能看到左右两边的刻度镜头。此时就可以用到蒙版，用渐变蒙版遮挡住上边和下边的刻度即可，蒙版效果如下：

在线演示地址，将色块换成刻度的图片然后旋转就可以了。

此效果可以加在需要高亮展示的地方，比如：

使用：

扫描应该是许多科幻片中经常出现的镜头，扫描的拖影可以根据页面主题自己修改长度，我给一个标题背景增加了扫描效果：

扫描的光拖影长度调整linear-gradient透明色的位置和伪元素宽度即可

使用：

页面的头部缺少特效？于是我增加了镜面反光效果，起初头部是这样的：

这底部的反光，说明当前的灯光异常的强烈有木有，这大块的面积，不再加点镜面反光什么都感觉很浪费。一般反光都是斜着的，那么我们就先弄一个斜着的高光：

同样，利用渐变写一个：

然后就是常规的操作，让反光动起来，从左至右：

可以看到，即使做了淡入淡出，在淡出时，高光的地方还是很怪，超出了反光的物体。这时候就又用到我们的蒙版了：

让蒙版和右边的边缘刚好贴合：

可是这个反光在经过字体的时候，把字体挡住了，因为反光实际是渐变的颜色，这个渐变的白色没有白色字体白时，会显得反光经过反而变暗的错误效果。这时候可以使用混合模式：

最终效果：

样式代码：

html使用：

如以上动画造成了卡顿问题，可将动画的移动方式换成transform的方式，开启gpu加速有利于提升性能。