Как реализовать анимацию смещения текста кнопки?
Нужно, чтобы текст у кнопки при ховере сначала уходил вверх, а потом появлялся снизу и возвращался в центр.
Пока смог додуматься только до этого:
snippet
Также оставлю ссылку на видео с тем, как должна выглядеть анимация:
https://ru.files.fm/u/5f3f4apeg
Дополнительно:
Кейфреймс
Ну примерно так на наведение уезжают вверх с середины, без наведения приезжают снизу в середину. Разве что еще чуть чуть поковыряться чтоб она при появлении не проигрывалась
Ответы:
Если бы не нужно было анимировать каждый символ отдельно - можно было бы попробовать сделать через ::before и ::after, куда в правило content запихиваешь содержимое кнопки. ::before позиционируем таким образом, чтобы мы его видели в центре кнопки, а ::after за его пределами. При наведении на кнопку ::before уводишь наверх, а ::after выводишь на середину кнопки.
Если же нужно обязательно анимировать посимвольно - проделываешь тот же самый алгоритм, но уже без ::before и ::after, а делая на вложенных элементах, типа такого:
<button class="button"> <div class="button-primary-text"> <span class="button-symbol">D</span> <span class="button-symbol">O</span> <span class="button-symbol">N</span> <span class="button-symbol">A</span> <span class="button-symbol">T</span> <span class="button-symbol">E</span> </div> <div class="button-secondary-text"> <span class="button-symbol">D</span> <span class="button-symbol">O</span> <span class="button-symbol">N</span> <span class="button-symbol">A</span> <span class="button-symbol">T</span> <span class="button-symbol">E</span> </div> </button> |
<button class="button"> <div class="button-primary-text"> <span class="button-symbol">D</span> <span class="button-symbol">O</span> <span class="button-symbol">N</span> <span class="button-symbol">A</span> <span class="button-symbol">T</span> <span class="button-symbol">E</span> </div> <div class="button-secondary-text"> <span class="button-symbol">D</span> <span class="button-symbol">O</span> <span class="button-symbol">N</span> <span class="button-symbol">A</span> <span class="button-symbol">T</span> <span class="button-symbol">E</span> </div> </button>
По идее стили будут несложные, через :nth-child задать некоторые задержки для символов внутри кнопки, а сам текст двигать с помощью transform: translate(...)
Возможно можно как-то и без "дублирования" кода, поигравшись как-то с transition, но, например, когда я смотрел всякие дизайнерские сайты на awwwards, то подобная анимация была сделала именно через дублирование
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации анимации смещения текста на кнопке можно использовать CSS анимации. Вот пример того, как это можно сделать с помощью HTML и CSS:
HTML:
<button class="animated-button">Нажми меня</button>
CSS:
.animated-button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; font-size: 16px; cursor: pointer; position: relative; overflow: hidden; } .animated-button::before { content: ""; position: absolute; background-color: rgba(255,255,255,0.4); top: 0; left: -100%; width: 100%; height: 100%; transition: left 0.3s; } .animated-button:hover::before { left: 0; }
В данном примере мы создаем кнопку с классом "animated-button" и добавляем псевдоэлемент ::before, который будет служить для анимации смещения текста кнопки. При наведении курсора на кнопку, псевдоэлемент сдвигается вправо, что создает эффект анимации смещения текста.
Таким образом, вы можете легко реализовать анимацию смещения текста на кнопке с помощью CSS. Не забудьте настроить стили и длительность анимации под свои нужды.