В zero block создаем кнопку, к которой нужно применить флешь эффект и задаём элементу класс .autoflash
Создаём блок T123, копируем и вставляем в него код, расположенный ниже.
Сохраняем, публикуем.
<script>
$(document).ready(function() {
$(".autoflash").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: 20px;
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>