<div id="particles"></div>
<div class="container-1">Этот контейнер из файла с header</div>
<div class="container-2">Этот контейнер из файла с контентом</div>
<div class="container-3">Этот контейнер из файла с footer</div>
.container-1 {
background: red;
}
.container-2 {
background: green;
}
.container-3 {
background: blue;
}
#particles {
position: absolute;
z-index: -1;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
html, body, #particles {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: white;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.