How to make this background with animation [closed]

Question

How to make this background with animation [closed]

Navigation

#1 by (2 votes)

0

I started to study a little about web, I would like your help to know how to make a background with an "infinite" animation like the one on this site:

link

Thank you!

javascript html css front-end

asked by anonymous 13.01.2017 / 12:59

1 answer

Failed to make a change to the database Vertically center a label on the StackPanel

score 2 · Accepted Answer

The code is this, it's pure CSS. The bottom lines are all made with code. Where it is written "linear" are the bottom lines moving. Take a look at the code.

 .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);
  }
}