Welcome!

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

SignUp Now!

Анимация

Фев
150
196
Активный
1740045176308.png
Всем привет подскажите как сделать такую же анимацию?
 
vk.com/damitz
Ноя
2,999
7,980
Профессионал
 
Фев
150
196
Активный
.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
 
Сверху