Welcome!

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

SignUp Now!

Анимация

Фев
90
109
Пользователь
1740045176308.png
Всем привет подскажите как сделать такую же анимацию?
 
nothing ever happens
Ноя
2,830
7,076
Профессионал
 
Фев
90
109
Пользователь
.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
 
Сверху