<div class="back"></div>
.back{
width:100%;
height:100vh;
margin:0 auto;
border-radius: 0rem;
background-color:hsla(0,100%,50%,1);
background-image:
radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
background-size: 200% 200%;/*サイズを大きくひきのばす*/
animation: back 10s ease infinite;
}
@keyframes back{
0%{ background-position:0% 0%; }
25%{ background-position:25% 25%; }
50%{ background-position:50% 50%; }
75%{ background-position:25% 25%; }
100%{ background-position: 0% 0%; }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.