DEV Community

Harish Machha
Harish Machha

Posted on • Edited on

Radio Asteral Frontend Design

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

OUTPUT

Image description

Image description

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay