Aller au contenu

Titre en machine à écrire

Un titre qui s’écrit lettre par lettre derrière un curseur clignotant, en CSS seul.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

La phrase d’accroche apparaît caractère par caractère, comme tapée au clavier, puis le curseur continue de clignoter à la fin. Tout est en CSS : un cache glisse d’une lettre à chaque pas sur une police à chasse fixe, sans script et sans découper le texte. Le titre reste un vrai texte entier pour les lecteurs d’écran et les moteurs de recherche dès le chargement. Avec prefers-reduced-motion, la phrase s’affiche d’emblée en entier, sans curseur.

Code

Chargement du code…

Contenu de l'archive

effet-texte-machine-a-ecrire-html-tailwind.zip3 fichiers · 4 Ko

  • index.html3 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 18 octobre 2026.

Dans le même esprit

  • Un titre dont les mots clés se font surligner l’un après l’autre, comme d’un coup de marqueur fluo.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Une annonce posée sur de petites bulles qui montent doucement du bas de la section en ondulant, puis s’évanouissent.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un titre en néon rose encadré d’un tube bleu, dont la lueur grésille de temps en temps comme une vraie enseigne.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Une annonce de saison derrière laquelle des feuilles d’automne tombent en se balançant doucement.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant