Эффект печатающегося текста на чистом CSS
 | |
| Здесь вашему вниманию представлена два простых варианта по созданию печатного текста, который полностью будет использоваться при помощи CSS. Красивая анимация всегда привлекает внимание, здесь же мы изначально закладываем смысл выводимого описание, оно может быть кратким, как примеру название сайта, также можно выставить небольшое описание, которое несет тематическое наклонение сайта. Вероятно вы уже встречались с такими эффектами, как просматривали, так и материал, но в большинстве случаев он идет с javascript. Но в нашем материале как видим все 2 варианта идут на чистом стиле CSS. Просто еще одна реализация стилистики для анимации ввода текста с использованием псевдоэлементов и анимации CSS3. Где изначально задаем знаки в HTML, но в самих стилях идет дизайн, также можно выставить скорость, это с каким промежутком станет появляться знак. Эффект впечатляющий, который не сложно реализовать, где можно посмотреть на demo странице, как изначально выглядит, хотя как поняли из описания, что все отлично редактируется под каждый стиль. Есть много вариантов для анимированного набор печати, где текст прописывают в CSS, и совершенно другая анимация, так что можете посмотреть и выбрать тот метод, который больше подходит. Приступаем к установке:  Создание анимации для печатающегося текст: HTML Код <div class="satodsan-uvemopag"> <h1>Эффект печатающегося текста</h1> </div> CSS Код .satodsan-uvemopag h1 { color: #eaeaf9; font-family: monospace; overflow: hidden; border-right: .17em solid #e29508; white-space: nowrap; margin: 0 auto; letter-spacing: .17em; animation: typing 3.5s steps(30, end), blink-caret .7s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange } На этом все, здесь как видим на чистом стиле выводит знаки. Демонстрация  Способ создания эффекта печатающегося текста: HTML Код <p class="dsongentom desetungavon">Пишущая машинка анимация чистый CSS</p> CSS Код .dsongentom{ position: relative; top: 50%; width: 30em; margin: 0 auto; border-right: 2px solid rgba(255,255,255,.75); font-size: 180%; text-align: center; white-space: nowrap; overflow: hidden; transform: translateY(-50%); } .desetungavon{ animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) infinite normal; } @keyframes typewriter{ from{width: 0;} to{width: 24em;} } @keyframes blinkTextCursor{ from{border-right-color: rgba(255,255,255,.75);} to{border-right-color: transparent;} } Немного похожий на первый вариант, но с небольшими изменениями. Вообще при правильном использовании CSS-анимация у вас появляется возможность как можно больше добавить интереса и индивидуальность интернет ресурсу. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
| |
