Welcome!

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

SignUp Now!

Анимация

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