gpt4 book ai didi

CSS 80 的 TRON 网格

转载 作者:行者123 更新时间:2023-12-03 22:12:26 25 4
gpt4 key购买 nike

我想用 CSS 构建一个“80 年代的 TRON 网格”效果,但我在把它放到我想要的地方时遇到了一些问题。

类似的东西 this .

enter image description here

我的需求:

  • 淡化 1 面到透明
  • 打包成漂亮的.class穿上任何 <element>它可以正常工作


  • 我已经用 2 种不同的技术进行了 2 次尝试。

    80 年代网格 #1(伪选择器)
    https://codepen.io/oneezy/pen/MPQWBE
    虽然这很完美,但放置 10 <div> 并不理想。每次我想要效果时都在我的 html 中。

    body { background: black; }

    .grid-container {
    position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden;
    transform: perspective(200px) rotateX(40deg) scale(1) translateZ(0);
    transform-origin: bottom;
    padding: 1px;
    -webkit-background-clip: content-box;
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    will-change: transform;
    }

    .grid-line { height: 100%; width: 100%; position: absolute; }


    .grid-line:before,
    .grid-line:after { content: ""; display: block; position: absolute; }
    .grid-line:before { height: 5px; width: 100%; background: blue; }
    .grid-line:after { height: 100%; width: 5px; background-image: linear-gradient(transparent, blue); }

    .grid-line:nth-child(1):before { top: 0%; opacity: 0; }
    .grid-line:nth-child(2):before { top: 10%; opacity: 0; }
    .grid-line:nth-child(3):before { top: 20%; opacity: .3; }
    .grid-line:nth-child(4):before { top: 30%; opacity: .4; }
    .grid-line:nth-child(5):before { top: 40%; opacity: .5; }
    .grid-line:nth-child(6):before { top: 50%; opacity: .6; }
    .grid-line:nth-child(7):before { top: 60%; opacity: .7; }
    .grid-line:nth-child(8):before { top: 70%; opacity: .8; }
    .grid-line:nth-child(9):before { top: 80%; opacity: .9; }
    .grid-line:nth-child(10):before { top: 90%; opacity: 1; }
    .grid-line:nth-child(11):before { top: calc(100% - 3px); }


    .grid-line:nth-child(1):after { left: 0%; }
    .grid-line:nth-child(2):after { left: 10%; }
    .grid-line:nth-child(3):after { left: 20%; }
    .grid-line:nth-child(4):after { left: 30%; }
    .grid-line:nth-child(5):after { left: 40%; }
    .grid-line:nth-child(6):after { left: 50%; }
    .grid-line:nth-child(7):after { left: 60%; }
    .grid-line:nth-child(8):after { left: 70%; }
    .grid-line:nth-child(9):after { left: 80%; }
    .grid-line:nth-child(10):after { left: 90%; }
    .grid-line:nth-child(11):after { left: calc(100% - 3px); }
    <section class="grid-container">
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    </section>


    80 年代网格 #2(线性渐变)
    https://codepen.io/oneezy/pen/OaQNPe
    这种技术是理想的,因为它允许我使用 1 .class在 1 <element> ,但我不知道如何让它淡出。

    body { background: black; }

    .grid-container { width: 100%; position: absolute; bottom: 0; left: 0; }

    .grid-container:after {

    transform: perspective(200px) rotateX(40deg) scale(2,1) translateZ(0);
    content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh;
    padding: 1px;
    -webkit-background-clip: content-box;
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    transform-origin: bottom center;
    will-change: transform;
    }

    .grid-container:after {
    background-position: center bottom;
    background-size: 40px 40px;
    background-image:
    linear-gradient(to right, blue 1px, transparent 0),
    linear-gradient(to bottom, blue 3px, transparent 0);
    }
    <section class="grid-container">
    </section>


    预先感谢您的建议:D

    最佳答案

    您可以使用 mask-image使用 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)));
    }

    看看这里: https://codepen.io/JoahG/pen/QJQdJB

    关于CSS 80 的 TRON 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53416334/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com