15 великолепных эффектов анимации текста CSS [Примеры]
Пост опубликован 13 марта 2023 в 11:29 и находится в рубриках HTML&CSS.
2405
Поделиться:
Одним из важных факторов дизайна веб-сайта является выбор шрифта и стиля типографики, который вы выбираете.Это может быть легко решаемая ситуация. Шрифты очень быстро бросаются в глаза и могут привлечь пользователя или оттолкнуть его, поэтому важно сделать правильный выбор.
Однако шрифты и типографика не обязательно должны быть статичными. Вы можете внедрить текстовые эффекты CSS на свой сайт, чтобы выделиться.Такие вещи, как прокрутка текста, тени, свечение текста, стиль, цвет, 3D-эффект и многое другое.
В этой статье мы сосредоточимся на анимации текста CSS.Их просто и легко интегрировать в ваш дизайн, используя чистый HTML, CSS и (в некоторых из них) некоторый JavaScript. Вы можете использовать их на веб-сайтах с анимацией прокрутки.
15 потрясающих текстовых анимаций с помощью CSS
Эти текстовые анимации CSS можно использовать, чтобы сделать вашу веб-страницу более интересной и придать ей уникальный дизайн и ощущение.Однако вы должны быть осторожны, не все эти текстовые эффекты CSS принесут пользу любому дизайну. Например, при минималистичном дизайне вы можете выбрать более тонкий эффект (просто проверьте эти минималистичные темы WordPress самостоятельно, и вы легко обнаружите, что они могут испортить их чистый дизайн)
Тем не менее, здесь должен быть дизайн, который соответствует потребностям и ожиданиям каждого пользователя, чтобы улучшить ваш дизайн и внешний вид. Ознакомьтесь с этими 15 текстовыми анимационными CSS-кодами, которые мы выбрали для вас.
1. Прокрутка запускает анимацию текста
See the Pen ScrollTrigger Text Reveal by Álvaro (@alvarotrigo) on CodePen.
Отличный пример того, как вы можете воспользоваться преимуществами анимации текста CSS, которая запускается при прокрутке пользователем. Этот использует триггер как для прокрутки вверх, так и вниз, поэтому анимация всегда будет работать в любом направлении.
Анимация с прокруткой идеально подходит для одностраничных веб-сайтов.
Если вы не знаете, как создать одностраничный веб-сайт,fullPage.js библиотекаоблегчит вам это.Вы даже можете использовать его в сборщиках WordPress, таких какElementorиGutenberg.
И если вы ищете анимацию триггера прокрутки, эта статья о том, как создавать CSS-анимации при прокрутке, может быть вам очень полезна.
2. Эффект анимации цвета текста (только для CSS)
See the Pen text-color-animation by Álvaro (@alvarotrigo) on CodePen.
Это просто чистый HTML и CSS, поэтому он будет очень прост в использовании и не требует никакого JavaScript. Он передает красочный переход разных цветов по тексту с помощью градиента, придавая очень современный вид.
Вы можете легко изменить выбранные цвета в соответствии с вашим собственным брендом, изменив шестнадцатеричные коды в CSS.
3. Статическое изменение цвета CSS
See the Pen Change the colors of each word — CSS Animation by Álvaro (@alvarotrigo) on CodePen.
Отлично подходит для большого заголовка, этот изменяет цвет каждого слова без какого-либо перехода. Этот текстовый эффект CSS может быть полезен, если у вас минималистичный дизайн и вы не хотите, чтобы все выглядело слишком занятым.
Созданные исключительно с помощью HTML и CSS, вы можете легко изменять цвета и скорость анимации. Просто попробуйте сами, изменив CSS в codepen.
4. Изменение текстового эффекта CSS
See the Pen Dark Text Animation by Álvaro (@alvarotrigo) on CodePen.
Более продвинутая анимация, выполненная с использованием чистого HTML, CSS и JavaScript. Как вы можете видеть в CSS codepen text animation, вы можете создавать более продвинутые анимации, если добавите немного JavaScript. Тем не менее, этот эффект все еще относительно легко редактировать и адаптировать к вашему бренду или стилю.
5. Подпрыгивание с анимацией текста с отражением (только CSS)
See the Pen Text Animation by Álvaro (@alvarotrigo) on CodePen.
Эффект прыгающего текста CSS, который имеет отражение, созданный только с использованием HTML и CSS, что делает его очень переносимым на разных веб-сайтах.
Он использует spanHTML-элемент для размещения каждой буквы в строке и отскакивает от каждой буквы во время анимации текста, поэтому будьте осторожны, где вы ее размещаете.
6. Текстовая анимация водной волны (только для CSS)
See the Pen water wave text animation effect by Álvaro (@alvarotrigo) on CodePen.
Текстовый CSS-эффект спокойной воды, он оживляет эффект спокойной волны в тексте. Отлично подходит для различных заголовков на веб-сайте, может действительно выделять его.
В этом используются только HTML и CSS, что упрощает работу.
7. Пересечение текстового эффекта CSS при прокрутке
See the Pen Crossing on scroll by Álvaro (@alvarotrigo) on CodePen.
Если вы ищете что-то для запуска анимации текста, вам может пригодиться анимация прокрутки, подобная этой. Для этого используются HTML, CSS и JavaScript. Анимация легкая и очень плавная. Прокрутка букв по отдельности также может повысить ценность этого текстового эффекта CSS.
8. Загрузка текстовой анимации в стиле CSS
Выглядит как индикатор выполнения загрузки, но в виде шрифта. Измените текст на любой, какой захотите, и используйте эту уникальную анимацию. Вы можете легко изменить цвета анимации текста в CSS codepen.
9. Анимация перевернутого текста (только CSS)
See the Pen Flip text animation by Álvaro (@alvarotrigo) on CodePen.
Может использоваться в качестве анимации загрузки при ожидании ответа на веб-странице, выполненной только с использованием HTML и CSS. Текст переворачивается слева направо и представляет собой очень плавную анимацию.
10. Плавное изменение анимации текста (только для CSS)
See the Pen Fade in text animation by Álvaro (@alvarotrigo) on CodePen.
Тонкая анимация текста (CSS), которая исчезает при загрузке страницы. Очень плавная анимация и имеет едва заметный эффект размытия при затухании. Сделано с использованием чистого HTML и CSS.
11. 3D-анимация роста текста
See the Pen "HEY" — CSS 3D Text Animation [ANIMATION] by Álvaro (@alvarotrigo) on CodePen.
Текстовая анимация (CSS) с эффектом 3D, который растет вверх и вниз. Очень забавная и привлекательная анимация для использования.
12. Анимированная текстовая анимация больших двоичных объектов (только для CSS)
See the Pen Animated Blobs Text — Multiple Colors by Álvaro (@alvarotrigo) on CodePen.
Очень тонкая анимация текста CSS с красочным фоном и привлекательным шрифтом. Созданный на основе чистого HTML и CSS, он позволяет легко изменять цвета и тип шрифта в соответствии с вашим брендом и стилем.
13. Базовая анимация текста (только CSS)
See the Pen Pure CSS text basic animations by Álvaro (@alvarotrigo) on CodePen.
Если вы ищете несколько базовых многоразовых текстовых анимаций (чистый CSS), которые можно быстро использовать во многих местах веб-страницы, эти эффекты для вас. Созданные только с использованием HTML и CSS, их легко редактировать и изучать.
14. Скользящая текстовая анимационная карусель (только для CSS)
See the Pen Text animation effect by Álvaro (@alvarotrigo) on CodePen.
Запоминающаяся и привлекательная текстовая анимация CSS, отлично подходящая для основного заголовка веб-страницы. Он перебирает разные слова и имеет эффект скользящей анимации для перехода между каждым словом. Сделано с использованием чистого HTML и CSS, поэтому с ним легко работать и редактировать.
15. Анимация ввода текста
See the Pen Text typing animation effect HTML, CSS & JS by Álvaro (@alvarotrigo) on CodePen.
Отличный способ продемонстрировать диапазон слов или предложений на экране в одной области. Эффект ввода текста CSS отлично подходит для многих дизайнов и использует плавную анимацию. Сделано с использованием HTML, CSS и JavaScript, но отлично подходит для изучения, и в нем легко редактировать слова, которые вам нужно использовать.
Заключение
Анимация текста CSS великолепна, она помогает создать привлекательное пространство для посетителей и помогает привлечь внимание к определенному месту. Они могут очень хорошо подходить для одностраничных веб-сайтов с полноэкранными разделами, создавая очень привлекательный дизайн для пользователя. Я думаю о целевых сайтах, страницах сжатия и т. Д.
FullPage.js библиотека — идеальный инструмент для создания такого полноэкранного веб-сайта. Он доступен для разработчиков WordPress, таких как Elementor и Gutenberg. Добавьте одну из этих текстовых анимаций CSS в полноэкранном режиме, и я уверен, что результат будет многообещающим. Например, как мы объяснили в 1st CSS text animation, анимация, запускаемая прокруткой, очень хорошо вписывается в одностраничный веб-сайт с несколькими разделами.
Однако может быть сложно выбрать правильную анимацию, не все анимации будут хорошо работать во всех дизайнах, поэтому обязательно спросите себя, не слишком ли загружена анимация, и, возможно, выберите более тонкую. Также не злоупотребляйте текстовыми эффектами CSS, это сделает страницу безвкусной и переполненной анимацией.
Новые посты:
Категории:
Топ посты:
- АКТИВАЦИЯ PHPSTORM, WEBSTORM, INTELLIJ IDEA И ДРУГИЕ ПРОДУКТЫ JETBRAINS ВЕРСИИ 2022.2.X И 2022.3 - 6.Мар.2023 (Просмотр: 6320)
- Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов - 6.Июн.2022 (Просмотр: 4245)
- Как создать бургер меню с выезжающей панелью на чистом CSS - 31.Янв.2022 (Просмотр: 4046)
- 15 великолепных эффектов анимации текста CSS [Примеры] - 13.Мар.2023 (Просмотр: 2405)
- Проверка позиций сайта по ключевым словам - 6.Апр.2022 (Просмотр: 2337)