Comment créer un effet de frappe animé

Sep 11, 2025

Comment

Quand utilisé bien, Animation CSS [dix] peut ajouter des intérêts et une personnalité à votre site. Dans cet article, nous allons passer à la manière de créer un effet animé qui fera apparaître votre typographie, comme s'il était saisi sur une machine à écrire. Vous pouvez voir un exemple de l'animation en action sur le site pour Crypton , un bot de trading de cryptocurrence. L'effet est impressionnant et il est facile à mettre en œuvre.

Pour d'autres façons simples de créer une conception Web décente, essayez un excellent Générateur de site Web [dix] outil, ou un haut hébergement Web [dix] un service. Ou, lisez pour savoir comment réaliser cette animation sur votre propre site.

Explorez la nouvelle frontière de l'animation CSS [dix]

01. Initiation du document

La première étape consiste à initier la structure de la page Web. Ceci est composé du conteneur HTML responsable de la conservation des sections de la tête et du corps. Bien que la principale responsabilité de la section principale consiste à charger le CSS externe, la section du corps stockera le contenu HTML créé à l'étape 2.

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; tête & gt;
& lt; titre & gt; effet de frappe & lt; / titre & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; / tête & gt;
& lt; corps & gt;
*** ÉTAPE 2 ICI
& lt; / corps & gt;
& lt; / html & gt;

02. Contenu HTML

Le contenu HTML est constitué d'un conteneur qui utilise la classe "Typage". Ceci sera utilisé par le CSS pour appliquer l'effet de frappe à tout élément enfant. L'élément de contenu enfant est fabriqué à partir d'une balise H1, mais vous pouvez utiliser un autre élément tel que «P» pour créer l'élément comme paragraphe.

 & lt; div mas = "taper" & gt;
  & lt; h1 & gt; mettez votre titre ici ... & lt; / h1 & gt;
& lt; / div et gt;

03. Initiation CSS

Créez un fichier appelé 'styles.css'. La première étape du CSS définit le document et les conteneurs corporels pour couvrir la fenêtre du navigateur complet sans espacement des frontières visibles. Les couleurs par défaut pour le fond de la page noire et les couleurs de texte blanc sont également définies dans cette étape. Les éléments de contenu dans la page hériteront de la couleur définie dans cette étape comme couleur par défaut.

 Corps, HTML {
  bloc de visualisation;
  largeur: 100%;
  Hauteur: 100%;
  Contexte: #000;
  Couleur: #fff;
  rembourrage: 0;
  marge: 0;
}

04. Taper des enfants

Tous les enfants du conteneur de frappe sont définis pour afficher sur une ligne sans utiliser d'emballage de texte. Plus important encore, ces éléments d'enfants ont l'animation «taper» qui leur sont appliquées. Cette animation est définie pour jouer plus de cinq secondes avec 50 instantanés de cadre - permettant l'effet de frappe décalé.

 .typing & gt; * {
  débordement caché;
  espace blanc: Nowrap;
  Animation: Typinganim 5s étapes (50);
}

05. yeux de visage

L'effet est également accompagné d'une face animée qui semble raconter le texte typé. Cette étape crée les yeux de cette face comme élément virtuel de CSS utilisant le après [dix] sélecteur. Les yeux sont placés par rapport au texte parent, avec son contenu défini sous forme de deux caractères de texte DOT.

 .typing & gt; *::après{
  teneur: ". .";
  bloc de visualisation;
  Position: absolu;
  TOP: 1EM;
  à gauche: .35em;
}

06. Face à la bouche

Comme avec les yeux, la bouche du visage est fabriquée à partir d'un élément virtuel CSS - cette fois en utilisant le avant que [dix] sélecteur. La bouche est positionnée par rapport à l'élément de texte parent, ainsi que d'avoir un rayon de bordure à apparaître avec une forme arrondie.

Le typingspeak [dix] l'animation est appliquée; Il durera pendant 0,5 seconde en utilisant deux cadres d'animation. Avec l'animation répétée cinq fois, le temps d'animation total sera de 2,5 secondes.

 .typing & gt; *::avant que{
  teneur: "";
  Position: absolu;
  bloc de visualisation;
  TOP: 2.1EM;
  à gauche: .25em;
  largeur: 1em;
  Hauteur: .1em;
  Rayon frontalier: 100%;
  Contexte: #fff;
  Animation: typingspeak .5S étapes (2);
  Animation-itération-Count: 5;
}

07. Définitions d'animation

Cette étape définit les animations référencées par des éléments créés dans les étapes précédentes. Le typinganim [dix] L'animation utilisée pour l'effet de frappe change son élément de rien de largeur à pleine largeur. Le typingspeak [dix] L'animation utilisée pour la bouche du visage change son élément de apparaître à plat à plus ouvert.

 @keyframes Typinganim {
  de {largeur: 0}
  {largeur: 100%}
}
@keyframes Typingspeak {
  0% {largeur: 1em; Hauteur: .1em}
  100% {largeur: 1em; Hauteur: .5em; }
}
***

Vous avez des fichiers de conception pour sauver?Mettez à niveau votre stockage en ligne [dix] Donc, c'est au travail.

Cet article a été publié à l'origine dans le numéro 275 de la création Web Design Magazine Web Designer. Achetez le numéro 275 ici ou Abonnez-vous à Web Designer ici .

Articles Liés: [dix]

Créer des animations slick ui [dix]
Comprendre la propriété d'affichage CSS [dix]
Créer un effet de texte de vapeur animé [dix]

Comment créer un effet de frappe animé

01. Initiation du document

02. Contenu HTML

03. Initiation CSS

04. Taper des enfants

05. yeux de visage

06. Face à la bouche

07. Définitions d'animation

Comment - Most Popular Articles

Votre stockage Apple iCloud est-il complet? Voici comment libérer de l'espace

Utilisez Adobe XD pour créer des interactions micro

Construisez votre propre jeu de physique WebLL

Comment mélanger une palette de gouache

Créer des visuels 3D interactifs avec trois.js

Construire un site de commerce électronique à partir de zéro

13 conseils pour faire un monde de jeu VR

Peignez un portrait comme les anciens maîtres

Catégories