Agregamos el siguiente CSS:
/* Efecto Noise */
body::before {
position: fixed;
top: -10rem;
left: -10rem;
animation: noisebg 1s steps(2) infinite;
will-change: transform;
background-image: url(/wp-content/uploads/noise.png);
background-position: 50%;
width: calc(100% + 20rem);
height: calc(100% + 20rem);
content: "";
z-index: 1;
pointer-events: none;
background-size: 170px;
}
@keyframes noisebg {
0% {
transform: translate3d(0, 9rem, 0)
}
10% {
transform: translate3d(-1rem, -4rem, 0)
}
20% {
transform: translate3d(-8rem, 2rem, 0)
}
30% {
transform: translate3d(9rem, -9rem, 0)
}
40% {
transform: translate3d(-2rem, 7rem, 0)
}
50% {
transform: translate3d(-9rem, -4rem, 0)
}
60% {
transform: translate3d(2rem, 6rem, 0)
}
70% {
transform: translate3d(7rem, -8rem, 0)
}
80% {
transform: translate3d(-9rem, 1rem, 0)
}
90% {
transform: translate3d(6rem, -5rem, 0)
}
to {
transform: translate3d(-7rem, 0, 0)
}
}
