Jak utworzyć animowany efekt pisania

Sep 12, 2025
Jak

Kiedy używany dobrze, Animacja CSS. może dodać zainteresowanie i osobowość do swojej witryny. W tym artykule przejdziemy przez to, jak stworzyć animowany efekt, który sprawi, że typografia pojawi się stopniowo, jakby była wpisana na maszynie do pisania. Możesz zobaczyć przykład animacji w działaniu na stronie Krypton. , bot handlowy kryptokurcydowy. Efekt jest imponujący i jest łatwy do wdrożenia.

W przypadku innych łatwych sposobów tworzenia przyzwoity projektowanie stron internetowych, spróbuj doskonalić Kreator strony internetowej narzędzie lub top hosting usługa. Lub, czytaj, aby dowiedzieć się, jak osiągnąć tę animację na własną stronę.

  • Przeglądaj nową frontier animacji CSS

01. Inicjacja dokumentów.

Pierwszym krokiem jest zainicjowanie struktury strony internetowej. Składa się z kontenera HTML odpowiedzialnego za przechowywanie sekcji głowicy i ciała. Podczas gdy główną odpowiedzialnością sekcji głowy jest załadowanie zewnętrznych CSS, sekcja korpusu będzie przechowywać zawartość HTML utworzoną w kroku 2. 

 i LT;! DocType HTML & GT;
& lt; html & gt;
& lt; Head & GT;
& lt; tytułowy Efekt pisania

02. Treść HTML.

Zawartość HTML składa się z kontenera, który używa klasy "wpisując". Będzie to używane przez CSS do zastosowania efektu wpisywania do dowolnych elementów dziecka. Element zawartości dziecka jest wykonany z tagu H1, ale można użyć innego elementu, takiego jak "p", aby utworzyć element jako akapit. 

 & LT; DIN CLASS = "Wpisywanie" & GT;
  & lt; H1 & GT; Umieść swój tytuł ... & LT; / H1 & GT;
& lt; / div & gt;

03. Inicjacja CSS.

Utwórz plik o nazwie "styles.css". Pierwszym etapem CSS określa pojemniki dokumentu i ciała, aby pokryć pełne okno przeglądarki bez widocznego odstępu granicznego. Domyślne kolory tła czarnej strony i białych kolorów tekstowych są również ustawione w tym kroku. Elementy treści na stronie dziedziczą kolor ustawiony w tym kroku jako domyślny kolor. 

 ​​Ciało, HTML {
  Blok wyświetlacza;
  Szerokość: 100%;
  Wysokość: 100%;
  Tło: # 000;
  Kolor: #FFF;
  Wyściółka: 0;
  Marża: 0;
}

04. Pisanie dzieci

Wszystkie dzieci w pojemniku do pisania są ustawione na wyświetlanie przez jedną linię bez użycia opakowania tekstowego. Co najważniejsze, te elementy dziecka mają do nich stosowane animację "pisania". Ta animacja jest ustawiona na odtwarzanie ponad pięć sekund za pomocą 50 mniszków ramowych - pozwalając na zatłoczonego efektu pisania. 

 ​​.typing & gt; * {
  Przepełnienie: Ukryte;
  Biała przestrzeń: Nowrap;
  Animacja: Typinganim 5s Steps (50);
}

05. Oczu twarzy

Efekt towarzyszy również animowana twarz, która wydaje się opowiadać typowy tekst. Ten krok tworzy oczy tej twarzy jako element wirtualny "CSS za pomocą po selektor. Oczy są umieszczone w stosunku do tekstu macierzystego, a jej zawartość ustawiono jako dwa znaki tekstowe. 

 ​​.typing & gt; *::po{
  zawartość: ". .";
  Blok wyświetlacza;
  pozycja: absolutna;
  Top: 1em;
  po lewej: .35em;
}

06. Usta twarzy

Podobnie jak oczami usta twarzy wykonane są z wirtualnego elementu CSS - tym razem używając przed selektor. Usta są ustawione w odniesieniu do elementu tekstowego macierzystego, a także o promieniu granicznym, aby pojawić się z zaokrąglonym kształtem.

The. Typingspeak. Animacja jest stosowana; Trwa 0,5 sekundy za pomocą dwóch ram animacji. Dzięki animacji jest powtarzane pięć razy, całkowity czas animacji będzie wynosił 2,5 sekundy. 

 ​​.typing & gt; *::przed{
  zawartość: "";
  pozycja: absolutna;
  Blok wyświetlacza;
  Top: 2.1em;
  po lewej: .25em;
  Szerokość: 1em;
  Wysokość: .1em;
  Radius Border: 100%;
  Tło: #FFF;
  Animacja: Kroki TypingSpeak .5s (2);
  Liczba iteracji: 5;
}

07. Definicje animacji

Ten krok określa animacje, do których odwołuje się elementy utworzone w poprzednich krokach. The. Typinganim. Animacja, która została użyta do efektu wpisywania zmienia swój element z brak szerokości do pełnej szerokości. The. Typingspeak. Animacja używana do ust twarzy zmienia swój element przed pojawieniem się płasko, aby bardziej otwarte. 

 ​​@keyframes typinganim {
  z {szerokość: 0}
  do {szerokość: 100%}
}
@keyframes TypingSpeak {
  0% {szerokość: 1em; Wysokość: .1em}
  100% {szerokość: 1em; Wysokość: .5em; }
}
***

Dostałem pliki projektowe, aby zapisać?Uaktualnić swoje magazyn w chmurze Więc to zależy od pracy.

Ten artykuł został pierwotnie opublikowany w wydaniu 275 kreatywnego projektanta Web Magazine Web Design Magazine. Kup problem 275 tutaj lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

  • Utwórz śliskie animacje UI
  • Zrozumienie właściwości wyświetlania CSS
  • Utwórz animowany efekt tekstu parowego

Jak - Najpopularniejsze artykuły

Jak Photoshop na iPhone (tak, to coś)

Jak Sep 12, 2025

(Kredyt obrazu: Jason Parnell-Brookes) SKOCZ DO: Photoshop Express. ..

Jak wdrażać lekkie lub ciemne tryby w CSS

Jak Sep 12, 2025

Specyfikacja CSS jest zawsze ewoluująca. Proces wdrażania nowych funkcji w CSS jest skomplikowany, ale wersja uproszczona jest ..

Łatwe stwarzające techniki modeli 3D

Jak Sep 12, 2025

Byłem dyrektorem animacji przez ostatnie kilka lat i pracował z wieloma animatorami, pomagając im doskonalić swoje umiejętno..

Jak narysować duży kot z pastelem

Jak Sep 12, 2025

Miękkość i jasność pastelowych kijów sprawiają, że idealny wybór w tle w moim Pastelowe rysunki ; mając ..

Utwórz i animuj wielokątów SVG

Jak Sep 12, 2025

W tym samouczku będziemy tworzyć szereg obrazów z trójkątów SVG i konfigurowanie animowanego przejścia z jednego obrazu do..

Rzeźba realistyczna anatomia w Zbrush

Jak Sep 12, 2025

Strona 1 z 2: Strona 1 Strona 1 Strona 2 Jeśli chcesz iść dalej ..

Jak wyrzucić przekonujące oczy w Zbrush

Jak Sep 12, 2025

Kiedy rzeźbienie realistyczne 3D ludzkie oko, aby dodać do swojej biblioteki gotowych do użycia aktywów, pamiętaj, że nie m..

Jak tworzyć włosy w stylu mangi w ruchu

Jak Sep 12, 2025

Uczenie się Jak narysować mangę nie jest łatwy feat. Tak więc, aby ułatwić łatwe jak to możliwe, wykonuję prosty proces krok po kroku, który wykorzystuje ruch, kszta..

Kategorie