0

comecei a estudar a pouco sobre web, gostaria da ajuda de vocês para saber como fazer um background com uma animação "infinita" como o deste site:

http://www.mallonitrace.com/

Grato!

1
  • 4
    Seria legal se colocar o código que estar a tentar...
    – MagicHat
    Commented 13/01/2017 às 12:09

1 Resposta 1

2

O Código é esse, é puro CSS. As linhas de fundo são todas feitas com código.
Onde está escrito "linear" são as linhas de fundo se mexendo. Dê uma olhada no código.

 .glitch-image img {
 position: absolute;
 top: 0px;
 left: 0px;
}
.glitch-image img:nth-child(2),
.glitch-image img:nth-child(3) {
  clip: rect(0, 0, 0, 0);
}
.glitch-image img{opacity:0;visibility:hidden;}
.effetto1 img:nth-child(2) {
left: 100px;
  -webkit-animation: example-three-anim-1 1s infinite linear alternate-reverse;
          animation: example-three-anim-1 1s infinite linear alternate-reverse;
}
.effetto1 img:nth-child(3) {
  left: -100px;
  -webkit-animation: example-three-anim-2 2s infinite linear alternate-reverse;
          animation: example-three-anim-2 2s infinite linear alternate-reverse;
}

.effetto2 img:nth-child(2) {
  left: 50px;
  -webkit-animation: example-three-anim-1 1s infinite linear alternate-reverse;
          animation: example-three-anim-1 1s infinite linear alternate-reverse;
}
.effetto2 img:nth-child(3) {
  left: -50px;
  -webkit-animation: example-three-anim-2 2s infinite linear alternate-reverse;
          animation: example-three-anim-2 2s infinite linear alternate-reverse;
}
.effetto3 img:nth-child(2) {
  left: 25px;
  -webkit-animation: example-three-anim-1 1s infinite linear alternate-reverse;
          animation: example-three-anim-1 1s infinite linear alternate-reverse;
}
.effetto3 img:nth-child(3) {
  left: -25px;
  -webkit-animation: example-three-anim-2 2s infinite linear alternate-reverse;
          animation: example-three-anim-2 2s infinite linear alternate-reverse;
}

.effetto4 img:nth-child(2) {
  left: 2px;
  -webkit-animation: example-three-anim-1 2s infinite linear (0.32, 0.92, 0, 1.46) alternate-reverse;
          animation: example-three-anim-1 2s infinite cubic-bezier(1, 0.63, 0, 1.79) alternate-reverse;
}
.effetto4 img:nth-child(3) {
  left: -2px;
    -webkit-animation: example-three-anim-2 3s infinite linear (0.42, 0, 0, 1.53) alternate-reverse;
              animation: example-three-anim-2 3s infinite linear (0.06, 1.06, 0, 1.54) alternate-reverse;
    }

/* noise */

@-moz-keyframes glitch {
  0% {
    -moz-transform: skew(31deg);
    transform: skew(31deg);
  }
  5% {
    -moz-transform: skew(-68deg);
    transform: skew(-68deg);
  }
  10% {
    -moz-transform: skew(74deg);
    transform: skew(74deg);
  }
  15% {
    -moz-transform: skew(-66deg);
    transform: skew(-66deg);
  }
  20% {
    -moz-transform: skew(-40deg);
    transform: skew(-40deg);
  }
  25% {
    -moz-transform: skew(52deg);
    transform: skew(52deg);
  }
  30% {
    -moz-transform: skew(33deg);
    transform: skew(33deg);
  }
  35% {
    -moz-transform: skew(51deg);
    transform: skew(51deg);
  }
  40% {
    -moz-transform: skew(89deg);
    transform: skew(89deg);
  }
  45% {
    -moz-transform: skew(80deg);
    transform: skew(80deg);
  }
  50% {
    -moz-transform: skew(-40deg);
    transform: skew(-40deg);
  }
  55% {
    -moz-transform: skew(-73deg);
    transform: skew(-73deg);
  }
  60% {
    -moz-transform: skew(26deg);
    transform: skew(26deg);
  }
  65% {
    -moz-transform: skew(80deg);
    transform: skew(80deg);
  }
  70% {
    -moz-transform: skew(-73deg);
    transform: skew(-73deg);
  }
  75% {
    -moz-transform: skew(29deg);
    transform: skew(29deg);
  }
  80% {
    -moz-transform: skew(18deg);
    transform: skew(18deg);
  }
  85% {
    -moz-transform: skew(53deg);
    transform: skew(53deg);
  }
  90% {
    -moz-transform: skew(-74deg);
    transform: skew(-74deg);
  }
  95% {
    -moz-transform: skew(-49deg);
    transform: skew(-49deg);
  }
}
@-webkit-keyframes glitch {
  0% {
    -webkit-transform: skew(52deg);
    transform: skew(52deg);
  }
  5% {
    -webkit-transform: skew(85deg);
    transform: skew(85deg);
  }
  10% {
    -webkit-transform: skew(32deg);
    transform: skew(32deg);
  }
  15% {
    -webkit-transform: skew(66deg);
    transform: skew(66deg);
  }
  20% {
    -webkit-transform: skew(-43deg);
    transform: skew(-43deg);
  }
  25% {
    -webkit-transform: skew(-89deg);
    transform: skew(-89deg);
  }
  30% {
    -webkit-transform: skew(43deg);
    transform: skew(43deg);
  }
  35% {
    -webkit-transform: skew(22deg);
    transform: skew(22deg);
  }
  40% {
    -webkit-transform: skew(-36deg);
    transform: skew(-36deg);
  }
  45% {
    -webkit-transform: skew(-19deg);
    transform: skew(-19deg);
  }
  50% {
    -webkit-transform: skew(-76deg);
    transform: skew(-76deg);
  }
  55% {
    -webkit-transform: skew(67deg);
    transform: skew(67deg);
  }
  60% {
    -webkit-transform: skew(44deg);
    transform: skew(44deg);
  }
  65% {
    -webkit-transform: skew(55deg);
    transform: skew(55deg);
  }
  70% {
    -webkit-transform: skew(-19deg);
    transform: skew(-19deg);
  }
  75% {
    -webkit-transform: skew(50deg);
    transform: skew(50deg);
  }
  80% {
    -webkit-transform: skew(69deg);
    transform: skew(69deg);
  }
  85% {
    -webkit-transform: skew(56deg);
    transform: skew(56deg);
  }
  90% {
    -webkit-transform: skew(-40deg);
    transform: skew(-40deg);
  }
  95% {
    -webkit-transform: skew(22deg);
    transform: skew(22deg);
  }
}
@keyframes glitch {
  0% {
    -moz-transform: skew(-24deg);
    -ms-transform: skew(-24deg);
    -webkit-transform: skew(-24deg);
    transform: skew(-24deg);
  }
  5% {
    -moz-transform: skew(-22deg);
    -ms-transform: skew(-22deg);
    -webkit-transform: skew(-22deg);
    transform: skew(-22deg);
  }
  10% {
    -moz-transform: skew(-26deg);
    -ms-transform: skew(-26deg);
    -webkit-transform: skew(-26deg);
    transform: skew(-26deg);
  }
  15% {
    -moz-transform: skew(-57deg);
    -ms-transform: skew(-57deg);
    -webkit-transform: skew(-57deg);
    transform: skew(-57deg);
  }
  20% {
    -moz-transform: skew(-83deg);
    -ms-transform: skew(-83deg);
    -webkit-transform: skew(-83deg);
    transform: skew(-83deg);
  }
  25% {
    -moz-transform: skew(6deg);
    -ms-transform: skew(6deg);
    -webkit-transform: skew(6deg);
    transform: skew(6deg);
  }
  30% {
    -moz-transform: skew(21deg);
    -ms-transform: skew(21deg);
    -webkit-transform: skew(21deg);
    transform: skew(21deg);
  }
  35% {
    -moz-transform: skew(82deg);
    -ms-transform: skew(82deg);
    -webkit-transform: skew(82deg);
    transform: skew(82deg);
  }
  40% {
    -moz-transform: skew(-3deg);
    -ms-transform: skew(-3deg);
    -webkit-transform: skew(-3deg);
    transform: skew(-3deg);
  }
  45% {
    -moz-transform: skew(29deg);
    -ms-transform: skew(29deg);
    -webkit-transform: skew(29deg);
    transform: skew(29deg);
  }
  50% {
    -moz-transform: skew(24deg);
    -ms-transform: skew(24deg);
    -webkit-transform: skew(24deg);
    transform: skew(24deg);
  }
  55% {
    -moz-transform: skew(78deg);
    -ms-transform: skew(78deg);
    -webkit-transform: skew(78deg);
    transform: skew(78deg);
  }
  60% {
    -moz-transform: skew(-19deg);
    -ms-transform: skew(-19deg);
    -webkit-transform: skew(-19deg);
    transform: skew(-19deg);
  }
  65% {
    -moz-transform: skew(22deg);
    -ms-transform: skew(22deg);
    -webkit-transform: skew(22deg);
    transform: skew(22deg);
  }
  70% {
    -moz-transform: skew(-53deg);
    -ms-transform: skew(-53deg);
    -webkit-transform: skew(-53deg);
    transform: skew(-53deg);
  }
  75% {
    -moz-transform: skew(34deg);
    -ms-transform: skew(34deg);
    -webkit-transform: skew(34deg);
    transform: skew(34deg);
  }
  80% {
    -moz-transform: skew(7deg);
    -ms-transform: skew(7deg);
    -webkit-transform: skew(7deg);
    transform: skew(7deg);
  }
  85% {
    -moz-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  90% {
    -moz-transform: skew(-58deg);
    -ms-transform: skew(-58deg);
    -webkit-transform: skew(-58deg);
    transform: skew(-58deg);
  }
  95% {
    -moz-transform: skew(36deg);
    -ms-transform: skew(36deg);
    -webkit-transform: skew(36deg);
    transform: skew(36deg);
  }
}
3
  • Eu jurava que aquela animação de fundo era feita em canvas. Onde ele ficou posicionando os elementos e metendo um transition pra fazer o efeito de transição.
    – Asura Khan
    Commented 13/01/2017 às 17:49
  • Esse tem canvas helpsanta.panic.lv. Mas o que ele perguntou é css mesmo. Commented 13/01/2017 às 21:04
  • Muito obrigado pela ajuda ;)
    – user64499
    Commented 14/01/2017 às 16:41