Как зделать переливающийся баннер

[Аллабчбчд]

Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.

Как зделать переливающий баннер типо баннер главного администратора и есть белая фигня и она в влево и в право

 

[Kolpak]

Анимированный баннер с эффектом.

Заходим в шаблоны стиля - extra.less Вставляем код: .userBannerLight, .userBanner--adminsforum{ display: inline-block; text-align: center; font-size: .7em; padding: .7em 1em; font-weight: 600; color: #fff; background: #FF0000; text-transform: uppercase...

pawno-help.ru

 

[Aerial]

Как зделать переливающий баннер типо баннер главного администратора и есть белая фигня и она в влево и в право

.userBannerLight,.userBanner {
    --ub-radius: 0.5em;
    --ub-glow: rgba(198,40,40,0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    box-sizing: border-box;
    font-size: .68em;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    padding: .55em .85em;
    max-width: 100%;
    width: auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    border: none;
    border-radius: var(--ub-radius);
    cursor: default;
    isolation: isolate;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(90deg, #ff4d4d, #c62828, #ff4d4d);
    background-size: 300% 100%;
    background-position: 0% 50%;
    animation: AnimBanner 3s linear infinite;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2),0 6px 16px -6px var(--ub-glow),inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.18);
    transition: transform .25s ease,box-shadow .25s ease,filter .25s ease
}

.userBannerLight:before,.userBanner:before {
    content: "";
    position: absolute;
    top: -20%;
    left: -80%;
    width: 55%;
    height: 140%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0) 100%);
    filter: blur(1px);
    background-repeat: no-repeat;
    pointer-events: none;
    animation: light 3.6s infinite ease-in-out;
    z-index: 1
}

.userBannerLight:after,.userBanner:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 50% -30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0
}

@media (hover: hover) and (pointer:fine) {
    .userBannerLight:hover,.userBanner:hover {
        transform:translateY(-1px);
        filter: brightness(1.08) saturate(1.05);
        box-shadow: 0 2px 4px rgba(0,0,0,0.22),0 10px 22px -8px var(--ub-glow),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(0,0,0,0.22)
    }
}

.userBannerLight:active,.userBanner:active {
    transform: translateY(0) scale(.985)
}

.userBannerLight.staff,.userBanner.staff,.userBannerLight.userBanner--staff,.userBanner.userBanner--staff {
    background: linear-gradient(90deg, #8b0000, #b80, #8b0000, #0a4b8a);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.gts,.userBanner.gts {
    background: linear-gradient(90deg, #f33, #8b0000, #dc143c, #f33);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.dalaner,.userBanner.dalaner {
    background: linear-gradient(90deg, #000, #696969, #800080, #8b0000, #ff4500, #ffd700, #0f0, #0ff, #00f, #8a2be2, #ff1493, #000);
    background-size: 1200% 100%;
    animation: AnimBanner 12s linear infinite
}

.userBannerLight.anonim,.userBanner.anonim {
    background: linear-gradient(90deg, #2a2a2a, #111, #2a2a2a);
    background-size: 300% 100%;
    animation: AnimBanner 6s linear infinite
}

.userBannerLight.razrab,.userBanner.razrab {
    background: linear-gradient(90deg, #f819a7, #4619f8, #1e90ff, #f819a7);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.director,.userBanner.director {
    background: linear-gradient(90deg, #f00, #ffa500, #ff0, #800080, #0ff, #f00);
    background-size: 600% 100%;
    animation: AnimBanner 8s linear infinite
}

.userBannerLight.zamdirectora,.userBanner.zamdirectora {
    background: linear-gradient(90deg, #f00, #ff8c00, #ff0, #f00);
    background-size: 500% 100%;
    animation: AnimBanner 6s linear infinite
}

.userBannerLight.stadm,.userBanner.stadm {
    background: linear-gradient(90deg, #06f, #04b, #039, #06f);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.soskags,.userBanner.soskags {
    background: linear-gradient(90deg, #49cc2c, #00ced1, #49cc2c);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.soskazgs,.userBanner.soskazgs {
    background: linear-gradient(90deg, #06f, #ba55d3, #06f);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.redadmin,.userBanner.redadmin {
    background: linear-gradient(90deg, #b22222, #f00, #8b0000, #b22222);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.user,.userBanner.user {
    background: linear-gradient(90deg, #bcbbbb, #515151, #2a2a2a, #bcbbbb);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.admin,.userBanner.admin {
    background: linear-gradient(90deg, #f00, #dc00ff, #ff9400, #f00);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.mlmoder,.userBanner.mlmoder {
    background: linear-gradient(90deg, #80c3df, #0da, #0a8, #80c3df);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.gmvkds,.userBanner.gmvkds {
    background: linear-gradient(90deg, #00f, #0000cd, #1a1aff, #00f);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.teamvkds,.userBanner.teamvkds {
    background: linear-gradient(90deg, #4682b4, #1e90ff, #4682b4);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.stmod,.userBanner.stmod {
    background: linear-gradient(90deg, #f819a7, #0859fc, #f819a7);
    background-size: 300% 100%;
    animation: AnimBanner 3s linear infinite
}

.userBannerLight.moder,.userBanner.moder {
    background: linear-gradient(90deg, #4169e1, #1c5bfc, #5e29f0, #4169e1);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.osnov,.userBanner.osnov {
    background: linear-gradient(90deg, #feea10, #ff931e, #feea10);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.prov,.userBanner.prov {
    background: linear-gradient(90deg, #7b9de0, #a0b8e8, #7b9de0);
    background-size: 300% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.prem,.userBanner.prem {
    background: linear-gradient(90deg, #666df2, #8a90f5, #666df2);
    background-size: 300% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.ga,.userBanner.ga {
    background: linear-gradient(90deg, #32cd32, #008000, #20b2aa, #32cd32);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.takers,.userBanner.takers {
    background: linear-gradient(90deg, #f36, #ff6b3d, #ffd700, #2ecc71, #00bcd4, #9b59b6, #e84393, #6c5ce7, #00cec9, #fd79a8, #fdcb6e, #0984e3, #f36);
    background-size: 1300% 100%;
    animation: AnimBanner 10s linear infinite
}

.userBannerLight.lider,.userBanner.lider {
    background: linear-gradient(90deg, #da0, #f08b9a, #da0);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.kur,.userBanner.kur {
    background: linear-gradient(90deg, #b0284d, #497fff, #b0284d);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.liderfam,.userBanner.liderfam {
    background: linear-gradient(90deg, #b0284d, #497fff, #0ff, #00f, #00008b, #b0284d);
    background-size: 600% 100%;
    animation: AnimBanner 6s linear infinite
}

.userBannerLight.adm,.userBanner.adm {
    background: linear-gradient(90deg, #6b8e23, #82f358, #49cc2c, #6b8e23);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.mod,.userBanner.mod {
    background: linear-gradient(90deg, #49cc2c, #82f358, #49cc2c);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.teh,.userBanner.teh {
    background: linear-gradient(90deg, #ff4500, #b50, #c00, #ff4500);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.grand,.userBanner.grand {
    background: linear-gradient(90deg, #f4a460, #daa520, #d2691e, #f4a460);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.black,.userBanner.black {
    background: linear-gradient(90deg, #111, #f00, #111, #f00);
    background-size: 400% 100%;
    animation: AnimBanner 3s linear infinite
}

.userBannerLight.sueta,.userBanner.sueta {
    background: linear-gradient(90deg, #808080, #c0c0c0, #8b4513, #808080);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.hassle,.userBanner.hassle {
    background: linear-gradient(90deg, #ffd700, #ffa500, #ff8c00, #ffd700);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.test,.userBanner.test {
    background: linear-gradient(90deg, #c71585, #ff1493, #ff69b4, #c71585);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.maloy,.userBanner.maloy {
    background: linear-gradient(90deg, #800080, #800000, #800080);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.project,.userBanner.project {
    background: linear-gradient(90deg, #d600c1, #ba00d6, #9d00d6, #d600c1);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.sponsor,.userBanner.sponsor {
    background: linear-gradient(90deg, #6a5acd, #4b0082, #8a2be2, #6a5acd);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.spec,.userBanner.spec {
    background: linear-gradient(90deg, #f00, #8b0000, #dc143c, #f00);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.osnovatel,.userBanner.osnovatel {
    background: linear-gradient(90deg, #feea10, #ff931e, #feea10, #ff931e);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.Gladmin,.userBanner.Gladmin {
    background: linear-gradient(90deg, #5ade21, #008000, #5ade21, #008000);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.ZGadmin,.userBanner.ZGadmin {
    background: linear-gradient(90deg, #4bb524, #26e0af, #4bb524, #26e0af);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.rykproekta,.userBanner.rykproekta {
    background: linear-gradient(90deg, #8b006d, #f00, #8b006d);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.prempolziy,.userBanner.prempolziy {
    background: linear-gradient(90deg, #f819a7, #0859fc, #f819a7);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.kmddsik,.userBanner.kmddsik {
    background: linear-gradient(90deg, #7b9de0, #0859fc, #7b9de0);
    background-size: 300% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.assistant,.userBanner.assistant {
    background: linear-gradient(90deg, #4b0082, #6a5acd, #483d8b, #4b0082);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.saharteam,.userBanner.saharteam {
    background: linear-gradient(90deg, #3d98ff, #c6ff6b, #21ed73, #3d98ff, #f700df, #4d0045, #758cff, #00f, #3d98ff);
    background-size: 800% 100%;
    animation: AnimBanner 10s linear infinite
}

.userBannerLight.zgts,.userBanner.zgts {
    background: linear-gradient(90deg, #f00, #8b0000, #dc143c, #f00);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.testaf,.userBanner.testaf {
    background-image: linear-gradient(270deg, #4b0082, #9400d3, #f0f, #4b0082);
    background-size: 300% 100%;
    border-color: rgba(148,0,211,0.6)
}

.memberHeader-banners .userBannerLight,.memberHeader-banners .userBanner,.memberTooltip-banners .userBannerLight,.memberTooltip-banners .userBanner {
    width: auto;
    max-width: 100%
}

@media (max-width: 650px) {
    .message:not(.message--forceColumns) .message-userBanner.userBanner.userBannerLight,.message:not(.message--forceColumns) .message-userBanner.userBanner.userBanner {
        display:inline-flex;
        width: auto;
        max-width: 100%;
        padding: .5em .9em;
        font-size: 0.7em;
        letter-spacing: 0.045em
    }
}

@media (max-width: 480px) {
    .userBannerLight,.userBanner {
        font-size:0.66em;
        padding: .45em .8em;
        letter-spacing: 0.035em;
        border-radius: 0.4em;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2),0 4px 12px -6px var(--ub-glow),inset 0 1px 0 rgba(255,255,255,0.28)
    }

    .userBannerLight:before,.userBanner:before {
        opacity: 0.8
    }
}

@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

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

    15% {
        opacity: 1
    }

    50% {
        opacity: 1
    }

    85% {
        opacity: 1
    }

    100% {
        left: 100%;
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .userBannerLight:before,.userBanner:before {
        animation: none
    }

    .userBanner,.userBanner * {
        animation: none !important;
        transition: none !important
    }

    .userBanner:hover {
        transform: none;
        filter: none
    }
}