Анимация кнопки
Бұндай анимацияны кнопкаға жасау үшін кнопкамыз тек ZERO блокта болуы қажет
Кнопканы ZERO блокқа қосып, мышканың оң жағын басып, Add CSS Class Name деген ссылканы басып ашылған поляға btnanim деп жазамыз
ZERO блокты жауып сақтаймызда сайттың төменгі жағына төмендегі кодты HTML 123 блогына көшіріп сақтап опубликовать кнопкасын басамыз. Сонымен біздің кнопкамыз дайын болады!
<style>
/*Эффект для кнопки*/
.btnanim {
    background-image: linear-gradient(0deg , #ffcc00 45%, #ffff00) !important;
    box-shadow: 0 10px 20px 0 rgba(255, 141, 0, 0.35) !important;
    background-position: 100% 0 !important;
    background-size: 200% 200% !important;
    transition: all 0.4s ease-in-out !important;
}
/*Эффект для кнопки*/
.btnanim:hover {
   box-shadow: 0 0 0 0 rgba(0,40,120,0) !important;
   background-position: 0 0 !important;
}
.btnanim {
        overflow: hidden;
        border-radius: 200px;
    }
     .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>

<script>
          
    $('.btnanim').addClass('autoflash').append('<div class="flash lighting" style="height: 105px;width: 40px;top: 0px;left: -80px;"></div>');
</script>
Қалыпты жағдайда кнопкамыздың түсі ZERO блоктағы настройкаға қарамай сары градиент түске айналады. Ол код арқылы енгізілген настройкаларды қабылдап тұрғандықтан.
Қалауыңыз бойынша ол кнопканың түсін, түрін өзгертуге болады.
Ол үшін кодтың мына бөлімін өзгертеміз
.btnanim {
background-image: linear-gradient(0deg , #ffcc00 45%, #ffff00) !important;
box-shadow: 0 10px 20px 0 rgba(255, 141, 0, 0.35) !important;
background-position: 100% 0 !important;
background-size: 200% 200% !important;
transition: all 0.4s ease-in-out !important;
}
background-image: linear-gradient(0deg , #ffcc00 45%, #ffff00) !important;
Кнопканың түсіне жауап береді! #ffcc00, #ffff00 мына екі кодты өзгерте отырып калаған түске грандиенті кнопка жасай аласыз
box-shadow: 0 10px 20px 0 rgba(255, 141, 0, 0.35) !important;
Кнопканың астындағы көлеңке (тень) - ге жауап береді.
0 үсті
10px оң жағы
20px асты
0 сол жағы
rgba(255, 141, 0, 0.35)
255-түстің коды
141-түстің коды
0-түстің коды
0,35-прозрачность
rgba түстердің кодын төмендегі сайттан ала-аласыз. Жәй қара түсті тень қою үшін rgba(0,0,0,0.35) кодын қойсаңыз болады!
Made on
Tilda