КОДЫ
<script>
/* https://vakas.ru/tilda/effekty-animacii-dlia-knopok-v-tilde/Флэш анимация для кнопки на стандартных блоках */
$('.t-btn').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
$('.t-submit').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
$('.mybutton').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
$('div[data-elem-type="button"] .tn-atom').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
</script>
<style>
.autoflash{
position: relative;
overflow: hidden;
}
.flash{
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 50%;
width: 0,5em;
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 5s ease-in-out infinite;
-moz-animation: moving 5s ease-in-out infinite;
-ms-animation: moving 5s ease-in-out infinite;
-o-animation: moving 5s ease-in-out infinite;
animation: moving 5s 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>
Student Account
Предоставляется для создания учебных проектов. Не предназначен для коммерческого использования
This site was made on
Tilda — a website builder
that helps to create a website without any code
Create a website
How to remove this block?
About platform
Submit a complaint
Student