Faire clignoter un widget sur un design

[Jumi63]

Bonsoir à tous,
Je cherche à faire clignoter un widget sur la page principale de mon design.
Cela fait plusieurs jours que je test en adaptant à mon cas pratique ce que j’ai pu lire sur le forum, et notamment les solutions proposées par @Salvialf. Je parviens à faire clignoter des valeurs en suivant ses excellents articles au travers du forum mais pas moyen de l’adapter à mon icône à faire clignoter.
Pour résumer je souhaiterais simplement faire clignoter un png lorsque mon système photovoltaïque est en autoconsommation à 100%. Jusqu’à maintenant j’avais une simple image de led qui passait du vert au rouge en fonction des valeurs mais je souhaiterais rendre cela un peu plus dynamique.
Je suis preneur si quelqu’un à des idées de solution, merci les copains !

[stouph19]

Bonjour.
Perso j’utilise des GIFS animés comme par exemple:

Ou cette led:

[Phpvarious]

Bonjour,

Tu peux utiliser du css pour cela :

ETAPE 1

• ajouter dans le custom.css (Réglages/système/Personnalisation avancée) :

/* to make an item flash, call the class "flashes" */
.flashes  {
   animation-duration: .8s;
   animation-name: flash;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes flash {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

une fois le code copié dans le fichier custom.css et sauvegardé, bien vérifier que celui-ci est bien activé :

ETAPE 2

• ajouter cette class précédemment créée dans le widget.

---

L’avantage d’utiliser cette méthode (custom.css) c’est que la fonction de clignotement sera disponible partout, il suffira simplement d’ajouter class="flashes" pour faire clignoter l’élément.

[pj66]

Hello,
J’ai mis un « j’aime » sur ton message précédent mais je dirais plutôt : j’adore et c’est même indispensable
Faut pas en mettre partout mais ça redynamise les designs
Je vais encore passer auprès des miens pour le roi du designer.
==> ne leur dites pas que je n’ai fait qu’un copié collé sans comprendre ce que je faisais .
Merci

[fleproust]

Possible aussi de faire des PNG animés. Avec Animated PNG (APNG) Maker par exemple.

[Jumi63]

Super, merci beaucoup pour toutes ces différentes solutions, c’est parfait !