<div></div>
div {
width: 100vw;
height: 100vh;
background-size: cover;
background-color: red;
background-image:
url("https://assets.codepen.io/226833/water.jpg"),
linear-gradient(red, yellow, blue),
linear-gradient( to left, black, white);
background-blend-mode:
difference,
overlay;
animation-duration: 3s;
animation-name: background-color-animation;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timin-function: ease-in-out;
}
@keyframes background-color-animation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.