Radio Asteral Frontend Design

#frontendchallenge #devchallenge #css

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;
    }
}