Anyone know how to make a background animation like this site?

-1

Hello, everyone, follow the site below: link

Does anyone know how to make this background? If you have a tutorial I thank you, I have already looked for a lot and found nothing.

    
asked by anonymous 06.04.2018 / 15:26

1 answer

1

The animation that is on the site was made in CSS .

In the example below I created a similar animation.

The% cos_de% changes the vertical position of the background with the pattern applied and the line keyframe defines the animation in animation: animacao 15s infinite linear; .

You can change the values and go testing to better understand how it works.

body {
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/tic-tac-toe.png');
  animation: animacao 30s infinite linear;
}

@keyframes animacao {
  50% {
    background-position: 0% 500%;
  }
  
  100% {
    background-position: 0% 1000%;
  }
}
    
06.04.2018 / 16:05