This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.
Inspiration
HTML Code
`
<!DOCTYPE html>
Wave Animation
RadioAsteral
<div class=”circles”>
<div class=”circles_circle circle1″></div>
<div class=”circles_circle circle2″></div>
<div class=”circles_circle circle3″></div>
<div class=”gradint-color”>
<div class=”innercolor1″></div>
<div class=”innercolor2″></div>
<div class=”innercolor3″></div>
</div>
<div class=”circleshadow”>
<div class=”gradint-color”>
<div class=”innercolor1″></div>
<div class=”innercolor2″></div>
<div class=”innercolor3″></div>
</div>
</div>
</div>
</main>
<script src=”script.js”></script>
`
CSS Code
`
.menu {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100vw;
z-index: 10;
background: black;
height: 100px;
opacity: 1;
align-items: center;
}
.logoname h2 {
font-family: Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
opacity: 1;
z-index: 11;
font-size: 2.5rem;
margin-left: 50px;
margin-top: 30px;
align-items: center;
font-weight: 800;
font-style: normal;
letter-spacing: 0.2em;
}
.circles {
border: none;
background-color: #000;
min-height: 100vh;
left: 50%;
overflow: hidden;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100vw;
z-index: 1;
}
.circles_circle {
border: 2px solid #ffffff;
border-radius: 50%;
height: 100vw;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(0);
width: 100vw;
will-change: transform;
animation-name: wave;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transition: wave 1.5s;
}
.circle1 {
animation-delay: 0s;
}
.circle2 {
animation-delay: 0.6s;
}
.circle3 {
animation-delay: 1.4s;
}
@keyframes wave {
0% {
opacity: 0.150;
transform: translateX(-50%) translateY(-50%) scale(0.2500);
}
50% {
opacity: 0.6800;
transform: translateX(-50%) translateY(-50%) scale(1.2000);
}
100% {
opacity: 0.9998;
transform: translateX(-50%) translateY(-50%) scale(1.2500);
}
}
.gradint-color {
clip-path: circle(50%);
height: 380px;
width: 380px;
left: 50%;
top: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
background: radial-gradient(#ed5701 73%, white);
animation: circleColor 1.0s normal forwards ease-in-out;
transition: circleColor 1.5s;
animation-delay: 0.8s;
opacity: 0;
}
@keyframes circleColor {
0% {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(0);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
}
}
.circleshadow {
display: block;
height: 430px;
width: 430px;
left: 50%;
border-radius: 300px;
top: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
filter: blur(25px);
z-index: -2;
}
.innercolor1 {
background: radial-gradient(#cad23d 70%, white);
height: 0px;
width: 0px;
left: calc(50% – 100px);
top: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
filter: blur(50px);
animation-name: randomWiggle;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
.innercolor2 {
background: radial-gradient(#c6e9e0 70%, white);
height: 0px;
width: 0px;
left: calc(50% – 100px);
top: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
filter: blur(50px);
animation-name: randomWiggle;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
.innercolor3 {
background: radial-gradient(#d4add4 70%, white);
height: 0px;
width: 0px;
left: calc(50% – 100px);
top: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
filter: blur(50px);
animation-name: randomWiggle;
animation-duration: 9s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
@keyframes randomWiggle {
0% {
left: calc(50% – 250px);
width: 0px;
height: 0px;
}
50% {
width: 550px;
height: 550px;
}
100% {
left: calc(50% + 250px);
width: 0px;
height: 0px;
}
}
`
OUTPUT
