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:
Thank you!
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:
Thank you!
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);
}
}