2024-03-05 12:40 Кнопки

Авто-блик для кнопки на Тильде в зеро-блоке

Часто заказчики просят сделать авто-блик на кнопке как в стандартных блоках. На этот случай есть модификация.

Как сделать авто-блик:

1. Создайте кнопку в зеро-блоке

2. Добавьте код из примера в блок Т123

3. Обновите страницу и зайдите в инструменты разработчика в браузере кнопка F12, далее нужно найти класс кнопки, скопировать его и вставить в код.

<!--авто-блик в зеро-блоке на тильде Cubeteam.ru-->



<script>

$('.tn-elem[data-elem-id="1709629371906"').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');

</script>



<!- - .tn-elem[data-elem-id="1709629371906" вместо этого класса вставляем свой в начале скрипта - ->

<style>

.autoflash{
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.flash{
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}

.lighting {
webkit-animation: moving 3s ease-in-out infinite;
-moz-animation: moving 3s ease-in-out infinite;
-ms-animation: moving 3s ease-in-out infinite;
-o-animation: moving 3s ease-in-out infinite;
animation: moving 3s ease-in-out infinite;
}


@keyframes moving {
30% { webkit-transform: skewX(-45deg) translateX(33.5em);
transform: skewX(-45deg) translateX(33.5em);
}

100% { webkit-transform: skewX(-45deg) translateX(33.5em);
transform: skewX(-45deg) translateX(33.5em);
}
}
</style>

Команда Cubeteam