nth-child() dynamique en css

Version imprimable

Bonjour à toutes & à tous
avec le code ci dessous (trouvé sur le net), j'affiche "PATIENTEZ" et les lettres, une après l'autre passent indéfiniment en jaune comme un "chenillard".

Ça marche bien si le texte affiché fait 9 lettres .

Mais comment automatiser cet affichage si la longueur de $texte est différente?
exemple: $texte = "essai" ou $texte = "abcdefghijklmnopqrstuvwxyz"

PHP:

Code:

1
2
3
4
5
6
7
<?php
                $texte = "PATIENTEZ";
                $long = strlen($texte);
                for ($i=1; $i <= $long ; $i++) { 
                    echo "<li>".substr($texte,$i-1,1)."</li>";
                }
?>

Css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div ul li{
	list-style: none;
	color: #484848;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90px;
	letter-spacing: 15px;
	animation: flash 1.4s linear infinite;
}
@keyframes flash {
	0%  {color:#484848; text-shadow: none;}
	90% {color:#484848; text-shadow: none;}
	100%{color:#fff900; text-shadow 0 0 7px #fff900, 0 0 50px #ff6c00;}
}
 
ul li:nth-child(1){animation-delay: 0.1s;}
ul li:nth-child(2){animation-delay: 0.2s;}
ul li:nth-child(3){animation-delay: 0.3s;}
ul li:nth-child(4){animation-delay: 0.4s;}
ul li:nth-child(5){animation-delay: 0.5s;}
ul li:nth-child(6){animation-delay: 0.6s;}
ul li:nth-child(7){animation-delay: 0.7s;}
ul li:nth-child(8){animation-delay: 0.8s;}
ul li:nth-child(9){animation-delay: 0.9s;}

merci d'avance pour votre aide
Cordialement
kolbyt

20/04/2022, 12h53
ProgElecT

Salut

Puisque la variable $long est fonction du contenu de la variable $texte, la boucle for $i aura pour maximum le nombre de caractères moins 1.
20/04/2022, 13h14
kolbyt
Bonjour ProgElecT
et merci de intéresser à mon soucis

je n'ai pas été assez clair dans mes explications, pour afficher $texte, pas de problème,
mais si la longueur de $texte est différente de 9, l'animation n'est pas bonne.

donc ma question serait plutôt
comment avoir la même animation quand le nombre de caractère est différent de 9

exemple avec 6 caractères, il faut
que les lignes du css ne s'appliquent pass:
Code:

1 2 3 ul li:nth-child(7){animation-delay: 0.7s;} ul li:nth-child(8){animation-delay: 0.8s;} ul li:nth-child(9){animation-delay: 0.9s;}
et modifier animation-delai pour les lignes

Code:

ul li:nth-child(1 à 6){animation-delay: x.xs;}

encore merci
Cordialement
kolbyt
20/04/2022, 18h35
NoSmoking

Bonjour,

Citation:

comment avoir la même animation quand le nombre de caractère est différent de 9

tu as la solution de créer dynamiquement, via JavaScript, ton CSS en fonction du nombre d'éléments créés. Pas sûr quand même que ta structure à base de <li> soit judicieuse !

L'autre solution est de créer plus de déclarations que le besoin, seules les utiles seront utilisées.