Як створити анімований ефект типу

Sep 17, 2025
Як

При використанні добре, Анімація CSS Можна додати відсотки та особистість до вашого сайту. У цій статті ми пройдемо, як створити анімований ефект, який зробить вашу типографію поступово, як якщо б вона була набрана на друкарській машинці. Ви можете побачити приклад анімації в дії на сайті Криптовий , CryptoCurrency Trading Bot. Ефект вражає, і це легко реалізувати.

Для інших легких способів створення гідного веб-дизайну, спробуйте відмінно Веб-будівельник інструмент або вершина веб хостинг Сервіс. Або, читайте, щоб дізнатись, як досягти цієї анімації на своєму власному сайті.

  • Дослідіть нову прикордонну анімацію CSS

01. Ініціація документів

Першим кроком є ​​ініціювання структури веб-сторінки. Це складається з контейнера HTML, відповідального за зберігання розділів голови та тіла. Незважаючи на те, що основна відповідальність керівника полягає в завантаженні зовнішніх CSS, розділ тіла буде зберігати вміст HTML, створений на кроці 2. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; Введення ефекту & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; body & gt;
*** Крок 2 Тут
& lt; / body & gt;
& lt; / html & gt;

02. HTML-вміст

Вміст HTML складається з контейнера, який використовує клас "Введення". Це буде використано CSS, щоб застосувати ефект набору до будь-яких дитячих елементів. Елемент вмісту дитини виконаний з теги H1, але ви можете використовувати інший елемент, наприклад, "p", щоб створити елемент як абзац. 

 & lt; div class = "Введення" & gt;
  & lt; h1 & gt; покласти назву тут ... & lt; / h1 & gt;
& lt; / div & gt;

03. Ініціювання CSS

Створіть файл під назвою "Styles.css". Першим кроком CSS визначає документ та контейнери для тіла, щоб покрити повне вікно браузера без будь-якого помітного інтервалу. Кольори за замовчуванням для фону чорної сторінки та білі текстові кольори також встановлюються на цьому етапі. Елементи вмісту на сторінці успадкують колір, встановлений на цьому етапі, як їх за замовчуванням. 

 ​​Тіло, HTML {
  Дисплей: блок;
  Ширина: 100%;
  Висота: 100%;
  фон: # 000;
  Колір: #fff;
  підкладка: 0;
  маржа: 0;
}

04. Введення дітей

Всі діти в контейнері для друку встановлюються, щоб відобразити через одну лінію без використання тексту обгортки. Найголовніше, що ці дитячі елементи мають анімацію "набору" набору ". Ця анімація встановлена ​​для відтворення протягом п'яти секунд з 50 знімками кадрів - дозволяючи вражений ефект типу. 

 ​​.typing & gt; * {
  переповнення: приховані;
  Білий простір: Nowrap;
  Анімація: TypingAnim 5s кроки (50);
}

05. Очіки обличчя

Ефект також супроводжується анімованим обличчям, яке, як видається, розповідає набраний текст. Цей крок створює очі цього обличчя як елемент віртуального елемента CSS, використовуючи після селектор. Очі розміщуються відносно материнського тексту, з його вмістом встановлюються як два символи точка. 

 ​​.typing & gt; * :: Після {{
  зміст: ".";
  Дисплей: блок;
  Позиція: абсолютна;
  TOP: 1EM;
  ліворуч: .35EM;
}

06. Рот

Як з очима, рот обличчя виготовляється з віртуального елемента CSS - на цей раз за допомогою до селектор. Рот розташований по відношенню до материнського текстового елемента, а також з радіусом кордону, щоб з'явитися з закругленою формою.

Точний тип застосовується анімація; Він триватиме 0,5 секунди за допомогою двох кадрів анімації. З анімацією повторюється п'ять разів, то загальний час анімації буде 2,5 секунди. 

 ​​.typing & gt; * :: до {
  зміст: "";
  Позиція: абсолютна;
  Дисплей: блок;
  Верх: 2.1em;
  ліворуч: .25em;
  Ширина: 1EM;
  Висота: .1EM;
  Прикордонний радіус: 100%;
  фон: #fff;
  Анімація: типова частина .5s кроки (2);
  Анімація-ітерація: 5;
}

07. Визначення анімації

Цей крок визначає анімації, на які посилаються елементи, створені на попередніх кроках. Точний типовий Анімація, яка була використана для ефекту набору тексту, змінює свій елемент без ширини до повної ширини. Точний тип Анімація, що використовується для рота обличчя, змінює свій елемент від появи квартири до більш відкритих. 

 ​​@keyframes typinganim {
  з {ширина: 0}
  до {ширини: 100%}
}
@Keyframes typingpeak {
  0% {Ширина: 1EM; Висота: .1Em}
  100% {Ширина: 1EM; Висота: .5ЕМ; }
}
***

Отримали дизайн-файли, щоб зберегти?Оновити свій хмара зберігання Так що це до роботи.

Ця стаття була опублікована у випуску 275 Web Designer Web Designer Web Design. Купити проблему 275 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

  • Створіть анімації Slick UI
  • Розуміння властивості відображення CSS
  • Створіть анімований текстовий ефект

Як - Найпопулярніші статті

Як спростити форму створення сумішей у майя

Як Sep 17, 2025

(Image Credit: Antony Ward) У Майі, поєднуються форми, або цілі морф, як вони �..

Як повернути день у ніч у Photoshop

Як Sep 17, 2025

Щоденні конверсії були навколо, поки Photoshop мав налаштування шарів, але ..

Додати цифрові кольори до малюнків олівця

Як Sep 17, 2025

Натисніть на зображення, щоб побачити його повний розмір ..

Введення до спеціальних властивостей CSS

Як Sep 17, 2025

Одна з найвищих функцій процесорів CSS є змінні. Маючи можливість оголо�..

Як малювати фантастичні звірі

Як Sep 17, 2025

Після того, як ви придумаєте ідею для фантастичної істоти, наступний к�..

13 Поради щодо створення VR Gaming World

Як Sep 17, 2025

Прив'язка - це критично визнана стратегічною грою третьої особи, призн�..

Створіть відповідну інформаційну панель з фігурою

Як Sep 17, 2025

Фігма - це графічний інструмент для дизайнерів UI. Він має простий інтерфейс і дає змогу співпрацювати на�..

Прискорити робочий процес текстури

Як Sep 17, 2025

Воїн - це особистий проект, який я мав радість концепції та проектуванн..

Категорії