Belépő animációk

Lebegő fény animáció

Élő előnézet – az animáció teljes méretben.

Élő előnézet

HTML · CSS · JS

<div class="we-test-animation">

    <div class="we-light"></div>

    <div class="we-content">
        <span>WebElements</span>
        <strong>Animáció</strong>
        <small>Folyamatos lebegő mozgás</small>
    </div>

</div>

.we-test-animation {
    width: 100%;
    max-width: 440px;

    margin: 60px auto;
    padding: 45px;

    position: relative;
    overflow: hidden;

    background: #0b1014;

    border:
        1px solid rgba(142, 240, 213, .25);

    border-radius: 22px;

    color: #f2f4f0;

    font-family:
        Arial,
        sans-serif;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


/* MOZGÓ FÉNY */

.we-light {
    position: absolute;

    width: 140px;
    height: 140px;

    left: -160px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(142,240,213,.45),
            rgba(142,240,213,.12) 40%,
            transparent 72%
        );

    filter: blur(8px);

    animation:
        weLightMove
        3s
        ease-in-out
        infinite
        alternate;
}


@keyframes weLightMove {

    0% {
        left: -160px;
    }

    100% {
        left: calc(100% + 20px);
    }

}


/* SZÖVEG */

.we-content {
    position: relative;
    z-index: 2;
}

.we-content span {
    display: block;

    margin-bottom: 12px;

    color: #8ee8d4;

    font-size: 11px;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.we-content strong {
    display: block;

    margin-bottom: 8px;

    font-size: 30px;

    font-weight: 400;
}

.we-content small {
    color: #87939a;

    font-size: 13px;
}

További animációk ebből a kategóriából