Вопрос Световой эффект баннеров

[niksi]

В общем, такая фигня , что хочу добавить свечение баннеру пользователя ( пример ), а выходит то , что ничего не выходит
Нашел вот такой вот CSS, да не понимаю как с ним обращаться

.userBannerLight:before, .userBanner--staff:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite;
}
::selection {
    background-color: rgba(13,169,239,0.8);
    color: #fff;
}

На данный момент баннеры выглядят так ( Тык )

Код вот такой вот..

.arizonaBanner {
    width: 169px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    margin: .6em 0em;
    border: none;
    position: relative;
    overflow: hidden;
    &.owner{background: url(https://svgshare.com/i/vDp.svg)}
    &.scripter{background: url(https://svgshare.com/i/vDq.svg)}
    &.deputy_owner{background: url(https://svgshare.com/i/vD7.svg)}
    &.creator{background: url(https://svgshare.com/i/vDx.svg)}
    &.deputy_creator{background: url(https://svgshare.com/i/vAy.svg)}
    &.osnova{background: url(https://svgshare.com/i/vE8.svg)}
    &.deputy_osnova{background: url(https://svgshare.com/i/vBj.svg)}
    &.director{background: url(https://svgshare.com/i/vCS.svg)}
    &.deputy_director{background: url(https://svgshare.com/i/vC2.svg)}
    &.special_admin{background: url(https://svgshare.com/i/vDi.svg)}
    &.main_admin{background: url(https://svgshare.com/i/wvK)}
    &.deputy_main_admin{background: url(https://svgshare.com/i/vDy.svg)}
    &.curator{background: url(https://svgshare.com/i/vDr.svg)}
    &.main_tech_admin{background: url(https://svgshare.com/i/vCc.svg)}
    &.deputy_main_tech_admin{background: url(https://svgshare.com/i/vDJ.svg)}
    &.tech_admin{background: url(https://svgshare.com/i/vAz.svg)}
    &.piar_manager{background: url(https://svgshare.com/i/vC3.svg)}
    &.deputy_piar_manager{background: url(https://svgshare.com/i/vDz.svg)}
    &.full_dostup{background: url(https://svgshare.com/i/vC4.svg)}
    &.spectator{background: url(https://svgshare.com/i/vCd.svg)}
    &.administrator{background: url(https://svgshare.com/i/vCk.svg)}
    &.helper{background: url(https://svgshare.com/i/vDK.svg)}
    &.admin_forum{background: url(https://svgshare.com/i/vCj.svg)}
    &.guest{background: url(https://svgshare.com/i/vCT.svg)}
    &.user{background: url(https://svgshare.com/i/vDs.svg)}
    &.media{background: url(https://svgshare.com/i/vCv.svg)}
    &.blata_net{background: url(https://svgshare.com/i/vCm.svg)}
    &.middle_admin{background: url(https://svgshare.com/i/vE0.svg)}
}

Хотелось бы добавить просто переливание как в примере к себе на баннеры, подскажите код (тема с световыми эффектами не помогает)

 

[Skaiman]

Мануал - Баннер со световым эффектом - Авторская зона xenforo 2 Skaiman

МануалБаннер со световым эффектом

svgzone.su

 

[Skaiman]

.arizonaBanner {
    width: 169px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: inline-block;
    padding: .5em 0em;
    margin: .6em 0em;
    border: none;
    position: relative;
    overflow: hidden;
    &.owner{background: url(https://svgshare.com/i/vDp.svg)}
    &.scripter{background: url(https://svgshare.com/i/vDq.svg)}
    &.deputy_owner{background: url(https://svgshare.com/i/vD7.svg)}
    &.creator{background: url(https://svgshare.com/i/vDx.svg)}
    &.deputy_creator{background: url(https://svgshare.com/i/vAy.svg)}
    &.osnova{background: url(https://svgshare.com/i/vE8.svg)}
    &.deputy_osnova{background: url(https://svgshare.com/i/vBj.svg)}
    &.director{background: url(https://svgshare.com/i/vCS.svg)}
    &.deputy_director{background: url(https://svgshare.com/i/vC2.svg)}
    &.special_admin{background: url(https://svgshare.com/i/vDi.svg)}
    &.main_admin{background: url(https://svgshare.com/i/wvK)}
    &.deputy_main_admin{background: url(https://svgshare.com/i/vDy.svg)}
    &.curator{background: url(https://svgshare.com/i/vDr.svg)}
    &.main_tech_admin{background: url(https://svgshare.com/i/vCc.svg)}
    &.deputy_main_tech_admin{background: url(https://svgshare.com/i/vDJ.svg)}
    &.tech_admin{background: url(https://svgshare.com/i/vAz.svg)}
    &.piar_manager{background: url(https://svgshare.com/i/vC3.svg)}
    &.deputy_piar_manager{background: url(https://svgshare.com/i/vDz.svg)}
    &.full_dostup{background: url(https://svgshare.com/i/vC4.svg)}
    &.spectator{background: url(https://svgshare.com/i/vCd.svg)}
    &.administrator{background: url(https://svgshare.com/i/vCk.svg)}
    &.helper{background: url(https://svgshare.com/i/vDK.svg)}
    &.admin_forum{background: url(https://svgshare.com/i/vCj.svg)}
    &.guest{background: url(https://svgshare.com/i/vCT.svg)}
    &.user{background: url(https://svgshare.com/i/vDs.svg)}
    &.media{background: url(https://svgshare.com/i/vCv.svg)}
    &.blata_net{background: url(https://svgshare.com/i/vCm.svg)}
    &.middle_admin{background: url(https://svgshare.com/i/vE0.svg)}
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }   
}

@keyframes light {
    0% {
        left: -80%
    }

    100% {
        left: 80%
    }
}