Переливание краски Администратор Pawno Help

[krelix]

Как сделать переливание белого цвета на краску как у павно хелп?

 

[ⲇⲉⲣυⲧⲁⲧ ⲣⲓⲧⲉʀⲋⲕⲓⲩ 𓆩♡𓆪]

.userBannerLight,.userBanner--staff {
    display: inline-block;
    text-align: center;
    font-weight: 500;
    color: #fff;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden
}

.userBannerLight.admin,.userBanner--staff.admin {
    background: linear-gradient(90deg, #cb2d3e, #ef473a);
    width: 101px
}

.userBannerLight.banned,.userBanner--staff.banned {
    background: linear-gradient(90deg, #99958c 25%, #99958c 100%, #000);
    width: 115px
}

.userBannerLight.user,.userBanner--staff.user {
    background: linear-gradient(90deg, #789 25%, #789 100%, #000);
    width: 93px
}

.userBannerLight.readOnly,.userBanner--staff.readOnly {
    background: linear-gradient(90deg, #333, #4d4d4d);
    width: 95px
}

.userBannerLight.moder,.userBanner--staff.moder {
    background: linear-gradient(90deg, #4b6cb7, #182848);
    width: 77px
}

.userBannerLight.editor,.userBanner--staff.editor {
    background-color: #5F72BE;
    background-image: linear-gradient(315deg, #5f72be 0%, #9921e8 74%);
    width: 67px
}

.userBannerLight.active,.userBanner--staff.active {
    background-color: #3333ff;
    background-image: linear-gradient(315deg, #00f 0%, #33f 74%);
    width: 67.5px
}

.userBannerLight.professional,.userBanner--staff.professional {
    background-color: #00b300;
    background-image: linear-gradient(315deg, #008000 0%, #00b300 74%);
    width: 100px
}

.userBannerLight.seller,.userBanner--staff.seller {
    background-color: #ff5c77;
    background-image: linear-gradient(315deg, #ff294d 0%, #ff5c77 74%);
    width: 100px
}

 

[krelix]

.userBannerLight,.userBanner--staff {
    display: inline-block;
    text-align: center;
    font-weight: 500;
    color: #fff;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden
}

.userBannerLight.admin,.userBanner--staff.admin {
    background: linear-gradient(90deg, #cb2d3e, #ef473a);
    width: 101px
}

.userBannerLight.banned,.userBanner--staff.banned {
    background: linear-gradient(90deg, #99958c 25%, #99958c 100%, #000);
    width: 115px
}

.userBannerLight.user,.userBanner--staff.user {
    background: linear-gradient(90deg, #789 25%, #789 100%, #000);
    width: 93px
}

.userBannerLight.readOnly,.userBanner--staff.readOnly {
    background: linear-gradient(90deg, #333, #4d4d4d);
    width: 95px
}

.userBannerLight.moder,.userBanner--staff.moder {
    background: linear-gradient(90deg, #4b6cb7, #182848);
    width: 77px
}

.userBannerLight.editor,.userBanner--staff.editor {
    background-color: #5F72BE;
    background-image: linear-gradient(315deg, #5f72be 0%, #9921e8 74%);
    width: 67px
}

.userBannerLight.active,.userBanner--staff.active {
    background-color: #3333ff;
    background-image: linear-gradient(315deg, #00f 0%, #33f 74%);
    width: 67.5px
}

.userBannerLight.professional,.userBanner--staff.professional {
    background-color: #00b300;
    background-image: linear-gradient(315deg, #008000 0%, #00b300 74%);
    width: 100px
}

.userBannerLight.seller,.userBanner--staff.seller {
    background-color: #ff5c77;
    background-image: linear-gradient(315deg, #ff294d 0%, #ff5c77 74%);
    width: 100px
}

А как сделать строку которая бежит в краске?

 

[𝙡𝙖𝙨𝙩 𝙚𝙢𝙥𝙚𝙧𝙤𝙧.]

.userBannerLight, .userBanner--staff {
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
}

 

[krelix]

.userBannerLight, .userBanner--staff {
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
}

А как сделать чтобы просто переливалось?

 

[JustAlex]

А как сделать чтобы просто переливалось?

Вот мануал на переливающийся ник:

Переливающийся ник

CSS имени пользователя: font-weight: bold; font-family: arial black; color: #ffffff; display: inline-block; position: relative; -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%); -webkit-mask-size: 200%; animation: wave 2s infinite...

pawno-help.ru

 

[viovit]

Вот мануал на переливающийся ник:

Переливающийся ник

CSS имени пользователя: font-weight: bold; font-family: arial black; color: #ffffff; display: inline-block; position: relative; -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%); -webkit-mask-size: 200%; animation: wave 2s infinite...

pawno-help.ru

искали медь нашли золото!!!