В этом видео я показываю и рассказываю как можно создать эффект на кнопку под названием (Авто-блик 2) На Tilda в зеро блоке.

Регистрируйтесь на лучшем конструкторе для создания сайтов Tilda: Регистрация здесь

Как сделать эффект блика для кнопки в Zero Block на Tilda


<script>
          
    $('#rec146040325 .tn-elem[data-elem-id="1566119404248"] .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;
        -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>
Ниже код для кнопки на фому в ZERO просто добавьте его на сайт и всё будет работать

<script>
//Функция добавления эффекта 
function zeroformbtn(){ 
setTimeout(function() { 
 
 
//Прописываем скрипт эффекта
     $('.t-submit').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -30px;"></div>');
 
 
 
}, 1500);}; 
zeroformbtn(); 
var resizeTimeout; 
$(window).resize(function(){ 
clearTimeout(resizeTimeout); 
resizeTimeout = setTimeout(function(){ 
zeroformbtn(); 
}, 1500); 
}); 
</script>





<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 4s ease-in-out infinite;
    -moz-animation: moving 4s ease-in-out infinite;
    -ms-animation: moving 4s ease-in-out infinite;
    -o-animation: moving 4s ease-in-out infinite;
    animation: moving 4s 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>
Скрипты и инструкции взяты и используются с официального сайта mo-ti.ru
Пожертвование на развитие проекта
Другие полезные уроки и статьи
Оставить заявку:
Написать мне в:
Нажимая кнопку, вы принимаете Положение и Согласие на обработку персональных данных
Есть вопросы?
Напишите мне