Aller au contenu

Texte circulaire qui tourne

Un macaron de texte disposé en cercle qui tourne lentement autour d’une icône, à côté d’une présentation.

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

Description

Une phrase courte suit un cercle et tourne lentement autour d’une icône, comme un tampon ou un sceau de qualité : idéal pour une pâtisserie, un artisan, une marque labellisée ou un studio. Le texte circulaire est du vrai texte SVG (net à toute taille, facile à traduire) et reprend une information déjà présente à côté, si bien que le décor est masqué aux lecteurs d’écran. Une case à cocher met la rotation en pause, comme le demande le critère WCAG 2.2.2, sans aucun script. Contraste AA en clair comme en sombre. Avec prefers-reduced-motion, le macaron reste immobile.

Code

Chargement du code…

Contenu de l'archive

effet-texte-circulaire-rotatif-html-tailwind.zip3 fichiers · 4 Ko

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

Mots-clés

Mis à jour le 18 octobre 2026.

Dans le même esprit

  • Un suivi de dossier en trois étapes où un tampon « Validé » vient se poser sur chaque carte quand elle arrive à l’écran.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un paysage de montagnes en plusieurs plans qui glissent à des vitesses différentes pendant le défilement.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un ciel de lever du jour où des nuages dérivent lentement derrière le titre et le texte d’accroche.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un bandeau de fête où des confettis de couleur tombent en tournoyant derrière l’annonce.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant