<!-- Добавляем эффект авто блика на кнопку в зеро-блоке Тильда | 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>
<!-- Добавляем эффект авто блика на кнопку в зеро-блоке Тильда | 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>