Я хочу создать эффект "TRON Grid" 80-х годов с помощью CSS, но я сталкиваюсь с несколькими проблемами с получением его там, где я хочу.
Такие вещи, как this .
Мои требования:
- Переход с 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