Texte clignotant [Résolu]

PoppyGuy · Message par **PoppyGuy** » 15 mars 2023, 09:37

Bonjour
Est-il possible de rendre un texte clignotant ?

Agent virtuel · Message par **Agent virtuel** » 17 mars 2023, 10:59

Bonjour

Essayer

.blinking{
animation:blinkingText 0.9s infinite;
}
@keyframes blinkingText{
0%{color: #000;}
49%{color: transparent;}
50%{color: transparent;}
99%{color:transparent;}
100%{color: #000;}
}

Copier/coller le code (par exemple) dans un Bloc-notes
Enregistrer
Type : Tous les fichiers
style.css

Ensuite (exemple)

Code : Tout sélectionner

<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<span class="blinking">Am I blinking?</span>
</body>
</html>

Copier/coller le code (par exemple) dans un Bloc-notes
Enregistrer
Type : Tous les fichiers
test.html

Ensuite, copier, style.css et test.html, vers un nouveau dossier (pour voir)
Ensuite, tester, test.html

Vous avez aussi la possibilité de colorier https://www.w3schools.com/colors/colors_picker.asp, style.css
Illustration

Code : Tout sélectionner

.blinking{
animation:blinkingText 0.9s infinite;
}
@keyframes blinkingText{
0%{color: #ff0000;}
49%{color: #4000ff;}
50%{color: #ffff33;}
99%{color: #cc33ff;}
100%{color: #2c4cd2;}
}

PoppyGuy · Message par **PoppyGuy** » 18 mars 2023, 08:13

Bonjour,
Ok, je regarde ça
Désolé, je n'y arrive pas

Agent virtuel · Message par **Agent virtuel** » 19 mars 2023, 11:46

Bonjour

Autre exercice, et par exemple

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<center><span class="blinking">Communauté Mozilla francophone</span>
<br><br>
</center>
<center><img src="https://www.mozfr.org/img/communaute.jpg"
alt="Communauté Mozilla francophone"
width="400"
height="341"
title="Communauté Mozilla francophone">
</center>
</body>
</html>

Illustration https://drive.google.com/file/d/15HL7GA ... share_link
Vous avez aussi la possibilité de Télécharger l'animation, si vous le souhaitez

Ajout

http://construireunsite.free.fr/1903202 ... /test.html
Information, dans cet exemple
Communauté Mozilla francophone, le résultat, c'est, CommunautÃ© Mozilla francophone
C'est peut-être le, é, qui est mal interprété

Edit : 19H42

C'est corrigé, j'ai ajouté, <meta charset="utf-8">

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<center><span class="blinking">Communauté Mozilla francophone</span>
<br><br>
</center>
<center><img src="https://www.mozfr.org/img/communaute.jpg"
alt="Communauté Mozilla francophone"
width="400"
height="341"
title="Communauté Mozilla francophone">
</center>
</body>
</html>

Maintenant, Communauté Mozilla francophone, le résultat, c'est, Communauté Mozilla francophone

PoppyGuy · Message par **PoppyGuy** » 21 mars 2023, 17:40

Ok, merci pour tout

Geckozone

Texte clignotant [Résolu]

Texte clignotant [Résolu]

Re: Texte clignotant

Re: Texte clignotant

Re: Texte clignotant

Re: Texte clignotant

Qui est en ligne ?