Comment créer un effet de machine à écrire CSS pour votre site Web-tutoriel CSS-php.cn

CSS pur crée des effets de texte de machine à écrire engageants

Points de base:

L'effet de machine à écrire CSS rend le contenu du site Web plus dynamique et attrayant en affichant progressivement du texte et peut être utilisé pour les pages de connexion, les sites Web personnels et les démonstrations de code.
Typewriter peut être créé en utilisant la fonction CSS steps() pour modifier la largeur de l'élément texte de 0% à 100%, et pour simuler le curseur de "Putout" le texte par animation.
L'effet de typage peut être ajusté en augmentant ou en diminuant le nombre d'étapes et la durée de l'animation de frappe pour accueillir du texte plus ou plus court.
Typewriter peut être utilisé en conjonction avec l'animation de curseur clignotante pour améliorer l'effet, et le curseur peut être personnalisé en ajustant ses propriétés border-right, la couleur, la fréquence des scintillements, etc.

Cet article vous guidera comment créer des effets dynamiques et plus attrayants de machines à écrire de texte de site Web à l'aide de CSS pure.

Le texte de simulation de l'effet de machine à écrire est affiché mot par mot, comme taper en temps réel devant vous.

How to Create a CSS Typewriter Effect for Your Website

L'ajout d'effets de machine à écrire dans les extraits de texte aide à attirer les visiteurs du site Web et à les garder intéressés à continuer à lire. Les effets de machine à écrire peuvent être utilisés à diverses fins, tels que la création de pages de connexion engageantes, des éléments d'appel à l'action, des sites Web personnels et des présentations de code.

Effects faciles à créer des machines à écrire

La création d'un effet de machine à écrire est très simple, il vous suffit d'avoir les connaissances de base des animations CSS et CSS pour comprendre ce tutoriel.

Le principe de travail de l'effet de machine à écrire est le suivant:

L'animation de la machine à écrire changera progressivement la largeur de l'élément texte de 0% à 100% en utilisant la fonction CSS steps(), affichant ainsi notre élément texte.
L'animation clignotante simulera le curseur de "Putout" le texte.

Créer une page Web de machine à écrire

Tout d'abord, créons une page Web pour la démonstration de Typewriter. Il contiendra un conteneur <div> pour le texte de la machine à écrire, avec le nom de la classe <code>typed-out:

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

Copier après la connexion

Style Style pour le conteneur de texte de machine à écrire

Maintenant que nous avons la mise en page de la page Web, allons-y <div> avec la classe "typed-out":

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

Copier après la connexion

Veuillez noter que pour rendre l'effet de machine à écrire efficace, nous avons ajouté ce qui suit:

"overflow: hidden;" et "width: 0;" Assurez-vous que le contenu du texte ne s'affiche pas avant le début de l'effet de frappe.
"border-right: .15em solid orange;", créez le curseur de machine à écrire.

Avant de faire un effet de frappe, afin d'arrêter le curseur après la dernière lettre de l'élément typed-out typed-out: display: inline-block;

.container {
  display: inline-block;
}

Copier après la connexion

Créer une animation de texte d'affichage

L'animation de Typewriter créera un effet textuel pour le texte dans l'élément

à afficher. Nous utiliserons typed-out Règles d'animation CSS: @keyframes

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

Copier après la connexion

Comme vous pouvez le voir, tout ce fait que l'animation est de changer la largeur de l'élément de 0% à 100%.

Maintenant, nous incluons cette animation dans notre classe typed-out et définissons son orientation d'animation sur forwards pour nous assurer que l'élément texte ne revient pas à width: 0 une fois l'animation terminée:

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

Copier après la connexion

Nos éléments de texte seront affichés de gauche à droite de manière fluide:

Ajouter des étapes pour atteindre l'effet de machine à écrire

Jusqu'à présent, notre texte a été affiché, mais c'est un moyen fluide de ne pas afficher le texte textuellement. C'est un début, mais évidemment, cela ne ressemble pas à l'effet de machine à écrire.

Pour que cette animation affiche nos éléments de texte textuellement ou étape par étape (tout comme une machine à écrire), nous devons diviser l'animation de frappe contenue dans la classe typed-out en étapes afin qu'il semble qu'il tape de taper en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en tapant en train de taper en tapant en tapant en tapant en tapant en tapant en tapant en train de taper en tapant en tapant en train de taper en tapant en tapant en train de taper en tapant en train de taper en tapant en tapant en train de taper sur Taping. . C'est là que la fonction CSS steps() entre en jeu:

.container {
  display: inline-block;
}

Copier après la connexion

Comme vous pouvez le voir, nous utilisons la fonction CSS steps() pour diviser l'animation de frappe en 20 étapes.

Ajustez les étapes pour la saisie plus longue

Pour ajuster le texte plus long, vous devez augmenter les étapes et la durée de l'animation de frappe.

Ajustez les étapes pour la saisie plus courte

Pour ajuster le texte plus court, vous devez réduire les étapes et la durée des animations de saisie.

Créer et définir l'animation du curseur clignotant

Apparemment, les machines à écrire mécaniques d'origine n'avaient pas de curseur clignotant, mais l'ajout pour imiter l'effet de curseur clignotant de processeurs informatiques / de mots plus modernes est devenu une tradition. L'animation de curseur clignotante aide à faire ressortir le texte imprimé des éléments de texte statique.

Pour ajouter une animation de curseur clignotante à notre animation de machine à écrire, nous allons d'abord créer une animation clignotante:

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

Copier après la connexion

Dans notre page Web, cette animation modifiera la couleur de la bordure de la bordure élémentaire typed-out (utilisée comme curseur pour les effets de machine à écrire) de transparent à orange.

Nous incluons cette animation dans les règles de la classe typed-out et définissons sa propriété de direction d'animation sur infinite pour faire disparaître et réapparaître le curseur indéfiniment toutes les 0,8 secondes:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: typing 1s forwards;
}

Copier après la connexion

Code pour ajuster l'effet de typage clignotant

Nous pouvons rendre le curseur plus mince ou plus épais en ajustant son attribut border-right: .15em solid orange;, ou vous pouvez faire la couleur du curseur différemment, lui donner border-radius, ajuster sa fréquence de scintillement, etc.

Éléments de la combinaison de l'animation de texte de machine à écrire

Maintenant que vous savez comment faire un effet de machine à écrire dans CSS, il est temps de démontrer certains cas d'utilisation pratiques et pertinents pour cet effet de dactylographie.

Conclusion

Dans cet article, nous comprenons à quel point il est facile de créer du texte "Typewriter" animé à l'aide de CSS. Cet effet de frappe peut certainement ajouter du plaisir et du plaisir à votre page.

Cependant, cela peut valoir un doux avertissement à la fin. Cette technique est mieux utilisée pour une petite quantité de texte non critique, juste pour ajouter un peu plus de plaisir. Mais veillez à ne pas compter sur-vous trop, car il y a certaines limites à l'utilisation d'animations CSS comme celle-ci. Assurez-vous de tester votre texte de machine à écrire sur divers appareils et tailles de fenêtre, car les résultats peuvent varier selon la plate-forme. Considérez également les utilisateurs finaux qui s'appuient sur la technologie d'assistance, idéalement, certains tests d'utilisation peuvent être effectués pour vous assurer de ne pas faire de désagréments aux utilisateurs. Parce que vous pouvez faire quelque chose avec un CSS pur ne signifie pas nécessairement que vous devriez. Si les effets de machine à écrire sont importants pour vous et que vous souhaitez l'utiliser pour un contenu plus critique, peut-être aussi considérer une solution JavaScript.

Quoi qu'il en soit, j'espère que vous avez apprécié ce post et cela vous fait réfléchir aux autres choses intéressantes que vous pouvez faire avec les animations CSS pour ajouter du plaisir et du plaisir à votre page.

Les questions fréquemment posées sur la création d'effets de la machine à écrire CSS

Enfin, répondons à certaines des questions les plus courantes sur la façon de créer des effets de machine à écrire dans CSS.

Quel est l'effet de machine à écrire?

"Effet de dactylographie" est une technique d'animation qui fait apparaître une chaîne de texte mot par mot sur l'écran comme s'il était tapé en temps réel par la machine à écrire. Cet effet est généralement créé avec JavaScript, mais il peut également être implémenté à l'aide de CSS uniquement, comme indiqué dans cet article.

Qu'est-ce que l'animation de machine à écrire?

La machine à écrire imprime le texte une lettre à la fois. L'animation de la machine à écrire est une animation qui imite la dactylographie de la machine à écrire, présentant du texte avec une lettre à la fois. Il s'agit d'un effet d'animation populaire sur de nombreuses pages Web.

Comment faire du tapage de texte animé dans CSS?

CSS moderne fournit une variété d'outils pour créer des animations, y compris animation, @keyframes, steps(). Ces outils sont utilisés pour afficher progressivement du texte qui est d'abord caché via l'attribut overflow.

Comment utiliser CSS pour créer des animations de machine à écrire personnalisables?

La création d'animations de machine à écrire personnalisables avec CSS implique l'utilisation de propriétés clés et de propriétés CSS pour contrôler l'apparence et le comportement du texte lors de la saisie sur l'écran. Vous pouvez le rendre personnalisable en exposant certains paramètres d'animation en tant que variables CSS (propriétés personnalisées) afin que vous puissiez facilement les modifier dans votre feuille de style. Par exemple:

Dans ce code CSS, nous définissons les propriétés personnalisées (

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

Copier après la connexion

) pour rendre l'animation personnalisable. Vous pouvez modifier les valeurs par défaut en modifiant ces propriétés. --typewriter-text --typewriter-duration

est entièrement imprimée? typed-out

dans l'animation de la machine à écrire CSS, vous pouvez utiliser l'animation CSS et l'attribut

: typed-out

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

Copier après la connexion

Dans le CSS ci-dessus, l'animation de machine à écrire augmente progressivement la largeur des éléments du conteneur, tapant efficacement le texte. La propriété .typewriter est définie sur animation-fill-mode pour s'assurer que l'animation reste finale (complètement jouée) après l'achèvement. Avec ce paramètre, le curseur clignote à l'élément forwards une fois qu'il est complètement imprimé. typed-out

Quels sont certains exemples de sites Web qui utilisent efficacement les effets de la machine à écrire?

Les animations de machines à écrire sont souvent utilisées sur des sites tels que les sites de portefeuille, en particulier sur les sites Web des concepteurs et développeurs, qui sont utilisés pour mettre en évidence les compétences clés et ajouter un sens créatif à la page, attirant ainsi l'attention du lecteur. Les effets de machine à écrire sont parfois utilisés dans les sites Web de blog et les pages de connexion ainsi que dans les démonstrations de produits.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!