28112 sujets

CSS et mise en forme, CSS3

[Résolu] Annimation CSS

Bonjour,

Ceci est mon 1er post, j'espère être dans la bonne catégorie.

Voici mon problème, je travaille sur ce site : https://vendreaunpromoteur.com/

Je dois effectuer quelques retouches et j'aimerai notamment animer le bouton "contactez-nous" présent en haut à droite.

L'animation est simple, j'aimerai que grace à un hover les 2 traits qui représentent l'onde sonore du téléphone s'animent comme s'ils apparaissaient.

J'espère avoir été suffisemment clair et vous remercie d'avance Smiley smile

Cordialement,
Franck
Modérateur
Bonjour,

En l'état ceci me semble absolument impossible dans la mesure où l'icône représentant le téléphone et ses ses ondes sont une glyphe de font-awesone. Celle-ci représente un tout insécable.

Vous pouvez soit animer l'icône entière soit changer de mode d'intégration (faire une icône en svg par exemple avec 3 définitions: telephone, onde1 et onde2). Dans ce dernier cas vous aurez un contrôle total sur chacun des éléments.

J'imagine que virer font-awesone vous est inenvisageable donc il vous faut alors revoir l'animation souhaitée sur ce bouton/cette icône (effet vibreur, rotation, translations etc...) mais oubliez l'idée de travailler les éléments indépendamment.


Bonne continuation.
Meilleure solution
Modérateur
Salut,

Sinon l'idée serait d'insérer un petit bloc dans le bouton qui viens cacher ces ondes et animer le background de ce bloc pour donner l'illusion de disparition/apparition des ondes... mais c'est très moche et pas très robuste.

+1 pour les solutions proposées Greg
Sujet clos
Aller à