Эффект с пробегающей полосой на кнопке или любом другом элементе

[basn]

2024-12-17_08-32-36.png (153.75 КБ) 69 просмотров

пример на https://basn63.ru/pf на баннере, если нет - пишите в личку, вдруг что не понятно

Код: Выделить всё

#your-custom-element{
    overflow: hidden;
}
@keyframes flasher {
    0% {
        left: 0%;
        margin-top: -100%;
    }

    30% {
        left: 100%;
        margin-top: 100%;
    }

    100% {
        left: 100%;
        margin-top: 100%;
    }
}
.flasher:after {
    content: "";
    width: 200%;
    background: linear-gradient(45deg, #ff4c00 25%, #0e0e53);
    height: 63%;
    top: 50%;
    left: -40%;
    position: absolute;
    animation-duration: 5s !important;
    animation-iteration-count: infinite;
    animation-name: flasher !important;
    pointer-events: none;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(115deg);
}