<div class="container">
<div class="gradient_01"></div>
<div class="gradient_02"></div>
<div class="gradient_03"></div>
<div class="gradient_04"></div>
</div>
.container {
width:100%;
display:flex;
}
@keyframes animazione {
0% {
background-size: 100%;
}
100% {
background-size:400%;
}
}
.gradient_01, .gradient_02, .gradient_03, .gradient_04 {
width:25%;
height:0;
padding-top:25%;
border-radius:100%;
animation: animazione 6s ease-in-out infinite alternate;
}
.gradient_01 {
background:repeating-radial-gradient(
circle at top left,
#ffff00,
#ffa500,
#ff0000,
#4b0082,
#000000 50%,
#ffff00 55%
);
}
.gradient_02 {
background:repeating-radial-gradient(
circle,
#ff0000,
#ff3300 30px
);
}
.gradient_03 {
background: repeating-radial-gradient(
circle at bottom center,
black 49%,
grey 50%
);
}
.gradient_04 {
background: repeating-radial-gradient(
circle at 100%,
#333,
#333 10px,
#eee 10px,
#eee 20px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.