Aurora Effect

aurora-effect.markdown

Aurora Effect

IDK What To Write.

A Pen by Muzammal Ahmed on CodePen.

License.

index.html

    <div class="a-slide slide">
        <div class="aurora-effect">
            <div class="color"></div>
            <div class="color"></div>
            <div class="color"></div>
        </div>
        <div class="a-main">
            <div class="letter a-letter">CSS</div>
            <div class="effect-name a-effect">Aurora Effect</div>
        </div>
    </div>

style.scss

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.icon {
    font-size: 200px;
    margin-top: 50px;
}

/* Global Styling for all slides */
.letter {
    font-size: 200px;
    text-align: center;
    font-family: "Luckiest Guy";

}

.effect-name {
    font-size: 60px;
    text-align: center;
    font-family: "Montserrat Alternates", sans-serif;
}

/* A - Aurora Effect */
.aurora-effect {
    width: 100%;
    height: 100vh;
    background-color: black;
    position: absolute;
    top: 0px;
    z-index: -1;
    overflow: hidden;
}

.aurora-effect .color {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    position: absolute;
}


.color:nth-child(1) {
    background-color: purple;
    animation: hue-rotate 10s linear infinite, color1 19s linear infinite;
}

.color:nth-child(2) {
    background-color: blue;
    animation: hue-rotate 15s linear infinite, color2 25s linear infinite;
}

.color:nth-child(3) {
    background-color: red;
    animation: hue-rotate 20s linear infinite, color3 15s linear infinite;
}

.a-main {
    width: 100%;
    position: absolute;
    z-index: 1000;
    height: 100%;
    background-color: #10002b8e;
    color: white;
    backdrop-filter: blur(200px);
    overflow: hidden;
    mix-blend-mode: soft-light;

}

.a-slide {
    display: flex;
}

.a-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
@keyframes hue-rotate {
    to {
        filter: hue-rotate(360deg)
    }

}

@keyframes color1 {
    0% {
        top: 0vh;
        left: 0vw;
    }

    25% {
        left: 0vw;
    }

    50% {
        top: 100vh;
    }

    75% {
        left: 100vw;
    }

    100% {
        top: 0vh;
        left: 0vw;
    }
}

@keyframes color2 {
    0% {
        top: 50vh;
        left: 100vw;
    }

    25% {
        top: 100vh;
    }

    50% {
        left: 0vw;
    }

    75% {
        top: 0vh;
    }

    100% {
        top: 50vh;
        left: 100vw;
    }
}

@keyframes color3 {
    0% {
        top: 100vh;
        left: 50vw;
    }

    25% {
        left: 100vw;
    }

    50% {
        top: 0vh;
    }

    75% {
        left: 0vw;
    }

    100% {
        top: 100vh;
        left: 50vw;
    }
}