Jak utworzyć animowany efekt pisania

Feb 2, 2026

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 utworzyć animowany efekt pisania

01. Inicjacja dokumentów.

02. Treść HTML.

03. Inicjacja CSS.

04. Pisanie dzieci

05. Oczu twarzy

06. Usta twarzy

07. Definicje animacji

Jak - Najpopularniejsze artykuły

Przewodnik po wizycie w chmurze Google

21 sposobów optymalizacji CSS i przyspieszenia witryny

Wskazówki dotyczące przepływów pracy z bruship

Master na dużą skalę środowisk w 3DS max

Jak wyrzucić postać w VR

6 sposobów przyspieszenia modelowania

Jak tworzyć kolorowe światy, które opowiadają historię

13 wskazówek dotyczących tworzenia świata VR Gaming

Kategorie