Как нарисовать линии сетки на фоне сайта после загрузки? - PullRequest
Новая
       57

Как нарисовать линии сетки на фоне сайта после загрузки?

4 голосов
/ 13 марта 2019

Я пытаюсь анимировать фон моего веб-сайта, который имеет сплошной фон, а затем я хочу "нарисовать" линии сетки над ним.Прямо сейчас у меня есть фон, нарисованный так: 

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?

Ответы [ 2 ]

3 голосов
/ 13 марта 2019

Один из способов сделать это совсем не связан с 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%;
  }
}

Чтобы увидеть это в действии, взгляните на this JSFiddle .

2 голосов
/ 13 марта 2019

Вы можете создать свой фон по-разному, используя 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>
...