Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Анимация

Фев
90
74
Пользователь
1740045176308.png
Всем привет подскажите как сделать такую же анимацию?
 
czaja.ru | May 14th
Ноя
2,754
6,567
Профессионал
 
Фев
90
74
Пользователь
.userorange {
color: #000;
background: #ffcb00;
border-color: #ffd533;
border-radius: 3px;
font-weight: inherit;
font-size: 11px;
box-sizing: border-box;
font-style: normal;
text-align: center;
list-style: none;
font-family: Arial, sans-serif;
}
 
A

Alone Devman

Less:
.userBannerLight, .userBanner--staff{
    display: inline-block;
    text-align: center;
    font-size: .7em;
    padding: .7em 1em;
    font-weight: 600;
    color: #fff;
    background: #FF0000;
    text-transform: uppercase;
    border: none;
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    :before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 10%, rgba(250,250,250,0.7) 70%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 3.1s infinite
    }
    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {
            width: 120px;
            text-align: center;
        }
    }
}
@keyframes light {
    0% {
        left: -80%
    }

    100% {
        left: 100%
    }
}

В группу пользователя
CSS:
userBannerLight adminsforum
 
Сверху