This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.
Inspiration
Description of Radio Asteral Design
radio wave animation is created utilizes HTML and CSS to simulate dynamic wave motions, visually representing the flow of energy through space. This animation captures the essence of universal design principles, making it engaging and accessible to all users, while effectively illustrating complex concepts in a simple and captivating manner.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Wave</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div class="index">
<div class="logoname">
<h2>RadioAsteral</h2>
</div>
</div>
<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>
</body>
</html>
CSS Code
body {
font-family: NeueMontreal-Regular, sans-serif;
}
.index {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100vw;
z-index: 10;
background: black;
height: 100px;
opacity: 1;
align-items: center;
justify-content: left;
justify-items: center;
}
.logoname h2 {
font-family: NeueMontreal-Regular, sans-serif;
color: rgb(255, 255, 255);
z-index: 11;
font-size: 3.5rem;
margin-left: 25px;
align-items: center;
justify-items: center;
font-weight: 800;
font-style: normal;
letter-spacing: -2px;
animation: texteffect 1.0s normal forwards ease-in-out;
animation-delay: 1.6s;
opacity: 0;
height: 100%;
transition: texteffect 1.9s;
}
@keyframes texteffect {
0% {
opacity: 0.150;
transform: translateX(0%) translateY(-90%) scale(1);
}
100% {
opacity: 1;
transform: translateX(0%) translateY(0%) scale(1);
}
}
.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.7800;
transform: translateX(-50%) translateY(-50%) scale(1.2000);
}
100% {
opacity: 1;
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
Top comments (0)