CSS 80'；电子栅

我想用CSS构建一个“80年代的TRON网格”效果，但是在我想要的地方我遇到了一些问题

比如

我的要求：

• 将一侧淡入透明
• 把它打包成一个漂亮的

  .class

  来放在任何
  上，它就可以工作了

---

我用两种不同的技术对此进行了两次尝试

80的网格#1（伪选择器）

虽然这样做很好，但每次我想要效果时，在html中放入10个

，这并不理想

body{背景：黑色；}
.grid容器{
位置：绝对；宽度：200%；高度：100vh；底部：0；左侧：-50%；溢出：隐藏；
变换：透视（200px）旋转（40度）缩放（1）平移（0）；
变换原点：底部；
填充：1px；
-webkit背景剪辑：内容框；
-webkit背面可见性：隐藏；
外形：1px实心透明；
改变：转变；
}
.网格线{高度：100%；宽度：100%；位置：绝对；}
.网格线：之前，
.网格线：{content:”；显示：块；位置：绝对；}
.网格线：在{高度：5px；宽度：100%；背景：蓝色；}之前
.网格线：{高度：100%；宽度：5px；背景图像：线性渐变（透明，蓝色）；}
.网格线：第n个子（1）：在{top:0%；不透明性：0；}之前
.网格线：第n个子（2）：在{顶部：10%；不透明度：0；}之前
.网格线：第n个子（3）：在{top:20%；不透明度：.3；}之前
.网格线：第n个子（4）：在{top:30%；不透明度：.4；}之前
.网格线：第n个子（5）：在{top:40%；不透明度：.5；}之前
.网格线：第n个子（6）：在{top:50%；不透明度：.6；}之前
.网格线：第n个子（7）：在{top:60%；不透明性：.7；}之前
.网格线：第n个子（8）：在{top:70%；不透明性：.8；}之前
.网格线：第n个子（9）：在{top:80%；不透明度：.9；}之前
.网格线：第n个子（10）：在{top:90%；不透明性：1；}之前
.网格线：第n个子（11）：在{top:calc（100%-3px）；}之前
.网格线：第n个子（1）：在{left:0%；}之后
.网格线：第n个子（2）：在{左：10%；}之后
.网格线：第n个子（3）：在{左：20%；}之后
.网格线：第n个子（4）：在{左：30%；}之后
.网格线：第n个子（5）：在{左：40%；}之后
.网格线：第n个子（6）：在{左：50%；}之后
.网格线：第n个子（7）：在{左：60%；}之后
.网格线：第n个子（8）：在{左：70%；}之后
.网格线：第n个子（9）：在{左：80%；}之后
.网格线：第n个子（10）：在{左：90%；}之后
.网格线：第n个子项（11）：在{left:calc（100%-3px）；}之后

---

您可以使用带有alpha渐变的

遮罩图像来实现您想要的效果

.grid-container:after { 
   -webkit-mask-image: -webkit-gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
   mask-image: gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

看看这里：
正是我想要的。谢谢