ok j'ai trouve une solution qui me convient, avec ton aide et celle de chat gpt évidemment :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effet Nuages sur Titre</title>
<style>
/* Insérez ici le CSS de l'exemple ci-dessus */
</style>
</head>
<body>
<h1 class="title">Votre Titre Animé</h1>
</body>
</html>
body {
background-color: #36364C; /* Couleur de fond */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: "Arial", sans-serif;
}
.title {
font-size: 4rem; /* Taille des lettres */
font-weight: bold;
letter-spacing: 0.1em;
color: transparent; /* Rendre les lettres transparentes */
background: linear-gradient(90deg, #00c2ff, #33ff8c, #ffc640, #e54cff);
background-size: 300% 300%; /* Augmente la taille pour un effet fluide */
background-clip: text; /* Applique l'effet aux lettres */
-webkit-background-clip: text; /* Compatibilité Chrome/Safari */
animation: cloud-move 6s infinite linear; /* Animation continue */
}
@keyframes cloud-move {
0% {
background-position: 0% 50%; /* Début du dégradé */
}
50% {
background-position: 100% 50%; /* Déplacement complet */
}
100% {
background-position: 0% 50%; /* Retour au point de départ */
}
}
Merci !
Mais c'est moins joli que l'exemple quand même!
Modifié par sieborg (06 Dec 2024 - 17:21)
