CSS HTML Переливающиеся префиксы

[nitarav]

Здравствуйте, хочу узнать может у кого есть такие префиксы?

 

[linmsqn]

Вероятнее всего это сделано самостоятельно. Самый простой вариант чтобы получить стили и настроить - через код элемента просто посмотреть и скопировать. Вот что нашел самостоятельно:

.gradientBanner {
    position: relative
}

.gradientBanner:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    animation: animate-shine 3s ease-out infinite
}

@keyframes animate-shine {
    0% {
        opacity: .1;
        width: 0
    }

    50% {
        opacity: .5
    }

    100% {
        opacity: 0;
        width: 100%
    }
}

.gradientBanner {
    font-size: 80%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 2px;
    text-align: center;
    display: inline-block
}

.gradientBanner.green {
    box-shadow: 0px 0px 5px #4caf50;
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff
}

.gradientBanner.green

- один из примеров рабочего баннера

Чтобы сделать подобное в extra.less добавляй:

.gradientBanner {
    position: relative
}

.gradientBanner:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    animation: animate-shine 3s ease-out infinite
}

@keyframes animate-shine {
    0% {
        opacity: .1;
        width: 0
    }

    50% {
        opacity: .5
    }

    100% {
        opacity: 0;
        width: 100%
    }
}

.gradientBanner {
    font-size: 80%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 2px;
    text-align: center;
    display: inline-block
}

.gradientBanner.green {
    box-shadow: 0px 0px 5px #4caf50;
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff
}

Чтобы добавить остальные стили, также в extra.less добавляешь

.gradientBanner.green {
    box-shadow: 0px 0px 5px #4caf50;
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff
}

и потом редактируешь название (green меняешь на другое), а также сами цвета в box-shadow, background-color и border-color

 

[nitarav]

Вероятнее всего это сделано самостоятельно. Самый простой вариант чтобы получить стили и настроить - через код элемента просто посмотреть и скопировать. Вот что нашел самостоятельно:

.gradientBanner {
    position: relative
}

.gradientBanner:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    animation: animate-shine 3s ease-out infinite
}

@keyframes animate-shine {
    0% {
        opacity: .1;
        width: 0
    }

    50% {
        opacity: .5
    }

    100% {
        opacity: 0;
        width: 100%
    }
}

.gradientBanner {
    font-size: 80%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 2px;
    text-align: center;
    display: inline-block
}

.gradientBanner.green {
    box-shadow: 0px 0px 5px #4caf50;
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff
}

.gradientBanner.green

- один из примеров рабочего баннера

Посмотреть вложение 207114
Чтобы сделать подобное в extra.less добавляй:

.gradientBanner {
    position: relative
}

.gradientBanner:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    animation: animate-shine 3s ease-out infinite
}

@keyframes animate-shine {
    0% {
        opacity: .1;
        width: 0
    }

    50% {
        opacity: .5
    }

    100% {
        opacity: 0;
        width: 100%
    }
}

.gradientBanner {
    font-size: 80%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 2px;
    text-align: center;
    display: inline-block
}

.gradientBanner.green {
    box-shadow: 0px 0px 5px #4caf50;
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff
}

Посмотреть вложение 207115

Чтобы добавить остальные стили, также в extra.less добавляешь

.gradientBanner.green {
    box-shadow: 0px 0px 5px #4caf50;
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff
}

и потом редактируешь название (green меняешь на другое), а также сами цвета в box-shadow, background-color и border-color

Да ты волшебник, спасибо