Кнопка «Отправить» с анимацией на JS + CSS
 | |
| Здесь представлена оригинальная анимация для кнопки воспроизведения, где по клику производится не эффект, а реальная перестройка дизайна на CSS. Если мы основном видим кнопки с эффектами, где при наведении она меняет оттенок цвета, или идет подчеркивание, вообще идет некое изменение в рамках одного дизайн. То в нашем случай мы изначально наблюдаем стандартную кнопку, но при клике она преобразуется в круглый элемент, где в кругу по центру идет галочка. Такой стиль можно задействовать на многих направлениях, а точнее, это может быть отправка письма, где жмем и видим красивую анимацию, которая в последствии преобразовывается в круг с галкой, что будет означать, данная операция завершена. Что смотрится очень стильно, и как то ново, в отличие от стандартного вида. Анимация кнопки безусловно дает большие плюсы, но вот чтоб еще работала на чистом стиле CSS, пока нет, здесь нужно и скрипты еще прописать. Такой вид идет по умолчанию:  Этот вид уже после прошедшей анимации:  Установка HEAD Код <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> HTML Код <main> <div class="knupaska"> <div class="kalonsa">Включить</div> </div> <div class="osnovanua_knopku"></div> <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;"> <path class="vasemulad" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/> </svg> </main> CSS Код .knupaska { background: #2f3438; height: 80px; width: 200px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; cursor: pointer; border-radius: 4px; } .kalonsa { font: bold 1.25rem/1 poppins; color: #05b6f3; position: absolute; top: 50%; transform: translateY(-52%); left: 0; right: 0; } .osnovanua_knopku { position: absolute; height: 10px; width: 0; right: 0; top: 50%; left: 50%; border-radius: 200px; transform: translateY(-50%) translateX(-50%); background: lighten(#2B2D2F, 15%); } svg { width: 30px; position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; right: 0; } .vasemulad { fill: none; stroke: #f2f7bb; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } JS Код var basicTimeline = anime.timeline({ autoplay: false }); var pathEls = $(".vasemulad"); for (var i = 0; i < pathEls.length; i++) { var pathEl = pathEls[i]; var offset = anime.setDashoffset(pathEl); pathEl.setAttribute("stroke-dashoffset", offset); } basicTimeline .add({ targets: ".kalonsa", duration: 1, opacity: "0" }) .add({ targets: ".knupaska", duration: 1300, height: 10, width: 300, backgroundColor: "#33363a", border: "0", borderRadius: 100 }) .add({ targets: ".osnovanua_knopku", duration: 2000, width: 300, easing: "linear" }) .add({ targets: ".knupaska", width: 0, duration: 1 }) .add({ targets: ".osnovanua_knopku", width: 80, height: 80, delay: 500, duration: 750, borderRadius: 80, backgroundColor: "#84dff3" }) .add({ targets: pathEl, strokeDashoffset: [offset, 0], duration: 200, easing: "easeInOutSine" }); $(".knupaska").click(function() { basicTimeline.play(); }); $(".kalonsa").click(function() { basicTimeline.play(); }); На этом установочный процесс завершен! Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
| |
