<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
body {
margin: 0;
padding: 0;
}
/*adding background to section
and animation named color-change*/
section {
position: relative;
width: 100%;
height: 100vh;
background-image: url(
background-size: cover;
background-position: center;
animation: color-change 10s linear infinite;
animation-delay: 1s;
}
/*adding rain img and making opacity 0*/
section:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(
animation: rain 0.4s linear infinite;
opacity: 0;
}
/* just changing the position of image
of rain using keyframes*/
@keyframes rain {
0% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: 8% 80%;
opacity: 1;
}
}
/* applying filter at different angle
on different interval using keyframe*/
@keyframes color-change {
0% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</
style
>
</
head
>
<
body
>
<
section
></
section
>
</
body
>
</
html
>