Animation CSS

[invited9107358]

Bonjour,

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

Voici mon problème, je travaille sur ce site : *****

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

Cordialement,
Franck
-----

[Stan_94]

Bonjour,
En CSS, il a plein de "trucs" pour faire des animations, plus ou moins simplement. Je suis loin de maîtriser ça, donc je partirai sur une option qui me parait simple.
Avoir 2 images, la première "statique" pour affichage par défaut et une autre en GIF animé qui s'affichera à la place de la première lorsqu'on passe la souris dessus.
Pour ça, une petite recherche dans Google avec les mots clés "CSS hover changer image" renvoi par exemple vers le site openclassrooms.com qui explique comme faire.

Enjoy

[uneautreterre]

Si j'ai bien compris, tu veux que lorsque la souris est positionnée sur le bouton, une petite icône apparaisse côté gauche.

Voilà comment je m'y prendrais au niveau du CSS

<span id=contact>Contactez-nous</span>

j'ai considéré que l'image du tel fait 40px de large

#contact {
    padding: 0.2em 0.2em 0.2em 45px;
    background: no-repeat url('tel.jpg') green;
    background-position: -40px;
    transition: background-position 0.5s
}
#contact:hover {
    background-position: left;
    transition: background-position 0.3s
}

Ça marche ? C'est ce que tu veux ?

[invite9583bf2d]

Que les ondes se déplace quand il passe la souris.
Je penserais plus à du Javascript pour ça.

Cdlt,
Gian BENHALIMA.

[A voir en vidéo sur Futura]