Texte dégradé

Texte animation

Animation

Texte dégradé

Test Unbounded + Dégradé Animé

Google reçoit plus de 8,5 milliards de recherches par jour. Ça fait environ 100 000 recherches par seconde. Probablement 90 % pour savoir « Pourquoi mon Wi-Fi ne marche pas ? ».

Code HTML

				
					<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Test Unbounded + Dégradé Animé</title>

  <!-- Le lien Google Fonts doit être chargé en premier -->
  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700&display=swap" rel="stylesheet">

  <style>
    /* Forcer la police même s'il y a des styles externes */
    body, .animated-gradient-text {
      font-family: 'Unbounded', cursive !important;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #fff;
    }

    .animated-gradient-text {
      position: relative;
      padding: 1em 2em;
      border: 4px solid transparent;
      border-radius: 12px;
      font-size: 2.5rem;
      font-weight: 700;
      background: linear-gradient(270deg, #40ffaa, #4079ff, #40ffaa, #4079ff, #40ffaa);
      background-size: 800% 800%;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradientMove 8s ease infinite;
    }

    .animated-gradient-text::before {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      z-index: -1;
      border-radius: 16px;
      background: inherit;
      animation: inherit;
    }

    @keyframes gradientMove {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  </style>
</head>
<body>

  <div class="animated-gradient-text">
   Google reçoit plus de 8,5 milliards de recherches par jour.
Ça fait environ 100 000 recherches par seconde. Probablement 90 % pour savoir « Pourquoi mon Wi-Fi ne marche pas ? ».
  </div>

</body>
</html>

Comment insérer le code sur son site ?

✏️ Étape 1 : Copiez ce code.

Copier le code complet. Ne vous inquiétez pas, vous le collerez tel quel.

🛠️ Étape 2 : Ajoutez ce code dans votre site.

Allez dans Pages > Modifier avec Elementor sur la page souhaitée
Cherchez le widget HTML
Glissez le widget HTML à l’endroit voulu sur la page
Collez tout le code que vous venez de copier dans le champ HTML
Cliquez sur Mettre à jour

✅ C’est terminé !

Quand vous visualisez la page, le texte circulaire tourne automatiquement, et ralentit si vous passez votre souris dessus 🌀

Strategie Execution Succès

Agence de webdesign à Brest spécialisé dans le référencement local.

Notre Newsletters

Navigation

Liens pratiques

Services

Location

Rue de l’Elorn, 29200 Brest

Site web réalisé par WREIZH.