youx agency

Код помогает добавить простой эффект автоматического блика для кнопки

Добавляем эффект авто-блика на кнопку в зеро-блоке

Заказать код
Вступить в чат
Поблагодарить
Видео-урок

Инструкция

1
Добавьте кнопку в зеро-блок и присвойте ей класс .autoink
2
Вставьте код в блок "Другое" - Т123 в подвал вашего сайта
3
Поменяйте border-radius кнопки в коде на свое значение
Код скопирован
Код для вставки

<!-- Добавляем эффект авто блика на кнопку в зеро-блоке Тильда | youx.agency -->
<!-- https://youx.agency/dobavlyaem-effekt-avto-blika-na-knopku-tilda -->

<style>

   .autoink {
    position: relative;
    overflow: hidden;
    border-radius:10px;
}

.autoink::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 2s linear infinite;
    pointer-events: none; /* Отключаем события указателя для псевдоэлемента */
}

@keyframes ripple {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}
</style>
Код скопирован
Вариант 2 (Код)

<!-- Добавляем эффект авто блика на кнопку в зеро-блоке Тильда | youx.agency -->
<!-- https://youx.agency/dobavlyaem-effekt-avto-blika-na-knopku-tilda -->

 <script>
                        $(document).ready(function() {
                            $(".autoink").addClass("tildaflash").append('<div class="flash_wrap-effects"><div class="flash_effects"></div></div>');
                        });
                        </script>

                        <style>
                        .tildaflash {
                            position: relative;
                            overflow: hidden;
                            border-radius: 16px;
                            -webkit-transform: translate3d(0, 0, 0);
                            transform: translate3d(0, 0, 0);
                        }

                        .flash_wrap-effects {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 16px;
                            -webkit-transform: translateX(-85px);
                            -ms-transform: translateX(-85px);
                            transform: translateX(-85px);
                            -webkit-animation-name: tildaflash;
                            animation-name: tildaflash;
                            -webkit-animation-duration: 3s;
                            animation-duration: 3s;
                            -webkit-animation-timing-function: linear;
                            animation-timing-function: linear;
                            -webkit-animation-iteration-count: infinite;
                            animation-iteration-count: infinite;
                        }

                        .flash_effects {
                            background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .4)));
                            background: -webkit-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
                            background: -o-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
                            background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
                            width: 45px;
                            height: 100%;
                            border-radius: 16px;
                            position: absolute;
                            top: 0;
                            left: 30px;
                            -webkit-transform: skewX(-45deg);
                            -ms-transform: skewX(-45deg);
                            transform: skewX(-45deg);
                        }

                        @-webkit-keyframes tildaflash {
                            20% {
                                -webkit-transform: translateX(100%);
                                transform: translateX(100%);
                            }

                            100% {
                                -webkit-transform: translateX(100%);
                                transform: translateX(100%);
                            }
                        }

                        @keyframes tildaflash {
                            20% {
                                -webkit-transform: translateX(100%);
                                transform: translateX(100%);
                            }

                            100% {
                                -webkit-transform: translateX(100%);
                                transform: translateX(100%);
                            }
                        }
                        </style>

Другие модификации

Вступите в наш чат в Телеграмм
Будьте в курсе новых событий, получите помощь, найдите единомышленников