Анимация кнопки
Бұндай анимацияны кнопкаға жасау үшін кнопкамыз тек ZERO блокта болуы қажет
Кнопканы ZERO блокқа қосып, мышканың оң жағын басып, Add CSS Class Name деген ссылканы басып ашылған поляға btnanim деп жазамыз
ZERO блокты жауып сақтаймызда сайттың төменгі жағына төмендегі кодты HTML 123 блогына көшіріп сақтап опубликовать кнопкасын басамыз. Сонымен біздің кнопкамыз дайын болады!
<style>
/*Эффект для кнопки*/
.btnanim {
background-position: 100% 0 !important;
background-size: 200% 200% !important;
transition: all 0.4s ease-in-out !important;
}
.btnanim {
overflow: hidden;
}
.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>
