Как я могу рисовать линии сетки на фоне веб-сайта после загрузки?
Я пытаюсь анимировать фон моего веб-сайта, который имеет сплошной фон, а затем я хочу «набросать» линии сетки поверх него. Прямо сейчас у меня есть фон, нарисованный как таковой:
background-color: #269;
background-image: linear-gradient(@light-grey 2px, transparent 2px),
linear-gradient(90deg, @light-grey 2px, transparent 2px),
linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
Я хочу, чтобы это было так, за исключением того, что я хочу, чтобы линейные градиенты загружались один за другим и чтобы они выглядели набросанными, если это возможно.
Я попытался посмотреть на этот код: Изменение цвета фона при загрузке страницы
И это казалось чем-то вроде того, что я пытаюсь сделать, но я не хочу, чтобы весь фон менялся, я хочу рисовать только в сетке.
Я также думаю, что мне может понадобиться использовать это, чтобы заставить его рисовать после загрузки страницы: JavaScript, который выполняется после загрузки страницы
Должен ли я назначать идентификаторы линейным градиентам и вызывать их в функции Javascript?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Один из способов добиться этого вообще не связан с JavaScript.
Вместо этого он использует псевдоэлемент CSS, содержащий только часть линии сетки фона, и анимирует его по мере того, как он растягивается от размера 0px * 0px до 100% * 100%.
Основная суть кода показана ниже (обновлено для отображения за содержимым div):
div {
/* Background color code is placed here */
position: relative;
z-index: 0;
}
div::before {
/* Grid background code is placed here */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
content: " ";
animation: gridWipe 1s linear;
}
@keyframes gridWipe {
0% {
width: 0px;
height: 0px;
}
100% {
width: 100%;
height: 100%;
}
}
Чтобы увидеть это в действии, взгляните на это JSFiddle.
Фиксированный. Псевдоэлемент ::before можно прикрепить к верхнему левому углу div, установив position: relative; на div, position: absolute; на псевдоэлемент и используя атрибуты top, left и z-index для перемещения и сложения обоих элементов. Я обновил свой ответ и JSFiddle, чтобы отразить это.
Большое спасибо за Вашу помощь! Прекрасно работает!
Вы можете создать свой фон по-разному, используя repeating-linear-gradient, а затем анимировать background-size, как показано ниже:
div.box {
background-image:
repeating-linear-gradient(to bottom,transparent,transparent 98px,lightGray 98px,lightGray 100px),
repeating-linear-gradient(to right, transparent,transparent 98px,lightGray 98px,lightGray 100px),
repeating-linear-gradient(to bottom,transparent ,transparent 19px,rgba(255, 255, 255, 0.3) 19px,rgba(255, 255, 255, 0.3) 20px),
repeating-linear-gradient(to right, transparent ,transparent 19px,rgba(255, 255, 255, 0.3) 19px,rgba(255, 255, 255, 0.3) 20px);
background-repeat:no-repeat;
background-color: #269;
width: 300px;
height: 300px;
animation:gridWipe 3s linear;
}
@keyframes gridWipe {
0% {
background-size:0 0;
}
100% {
background-size:100% 100%;
}
}
p {
background: rgba(255,255,0,0.5);
}<div class = "box">
<p>Lorem ipsum</p>
</div>Вы также можете рассмотреть некоторые переменные CSS для оптимизации вашего кода:
div.box {
--l_b:2px; /*width of the big line*/
--l_s:1px; /*width of the small line*/
--d_b:100px; /*distance between big lines*/
--d_s:20px; /*distance between small lines*/
--c1:transparent,transparent calc(var(--d_b) - var(--l_b)),lightGray calc(var(--d_b) - var(--l_b)),lightGray var(--d_b);
--c2:transparent,transparent calc(var(--d_s) - var(--l_s)),rgba(255, 255, 255, 0.3) calc(var(--d_s) - var(--l_s)),rgba(255, 255, 255, 0.3) var(--d_s);
background-image:
repeating-linear-gradient(to bottom,var(--c1)),
repeating-linear-gradient(to right, var(--c1)),
repeating-linear-gradient(to bottom,var(--c2)),
repeating-linear-gradient(to right, var(--c2));
background-repeat:no-repeat;
background-color: #269;
width: 300px;
height: 300px;
animation:gridWipe 3s linear;
}
@keyframes gridWipe {
0% {
background-size:0 0;
}
100% {
background-size:100% 100%;
}
}
p {
background: rgba(255,255,0,0.5);
}<div class = "box">
<p>Lorem ipsum</p>
</div>
Спасибо, это полезно! Но теперь он, кажется, отталкивает текст, когда сетка стирается. Как я могу сделать так, чтобы текст над анимацией оставался на одном месте? Например, если вы добавите <p>"Test"</p> в div в предоставленном вами JSFiddle, он будет вытеснен при стирании сетки.