faire une rotation continue sur une image en hover sur naviguation
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
faire une rotation continue sur une image en hover sur naviguation
Détails techniques
Version du forum : phpBB2Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 15/01/19
Lien du forum : http://escale-majuscule.forumactif.org/
Description du problème
J'ai utilisé cette astuce : https://forum.forumactif.com/t246228-images-de-la-barre-de-navigation-modifiees-au-passage-de-la-sourisbonjour
J’aimerais changer et mettre une image ronde en hover qui tourne en permanence lorsqu’elle est survolée par la souris ( hover )
J’ai utilisé l’astuce navigation modifié au passage de la souris
J’ai trouvé pas mal de choses mais rien qui tourne en permanence
Si quelqu’un a une idée en css, je suis preneur
Merci
Voila mon css de mon icone d’accueil
- Code:
/*IMAGE ACCUEIL*/
#i_icon_mini_index{
background-image:url('https://i.servimg.com/u/f32/11/94/15/08/accuei16.png'); /*image si la souris ne survole pas*/
width:100px; /*Largeur de l'image*/
height:100px; /*Hauteur de l'image*/
border:1px solid #000;
background:yellow;
transform: skew(10deg);
-webkit-transform: skew(10deg);
box-shadow: 3px 3px 3px blue;
}
#i_icon_mini_index:hover{
background-image:url('https://i.servimg.com/u/f32/11/94/15/08/accuei17.png'); /*image si la souris survole*/
width:100px; /*Largeur de l'image*/
height:100px; /*Hauteur de l'image*/
border:1px solid #000;
background:#5eb2d9;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
box-shadow: 3px 3px 3px red;
}
Dernière édition par hippocampe le Ven 18 Jan 2019 - 9:54, édité 1 fois
Re: faire une rotation continue sur une image en hover sur naviguation
Bonjour ^^
Il y a bien la fonction rotate de la propriété transform mais elle necessite en argument une valeur en nombre de tours ou en angle (1 tour = 360 degrés) et l'animation finira tôt ou tard par s'arrêter.
Pourquoi ne pas simplement utiliser une image animée au format gif ?
Il y a bien la fonction rotate de la propriété transform mais elle necessite en argument une valeur en nombre de tours ou en angle (1 tour = 360 degrés) et l'animation finira tôt ou tard par s'arrêter.
Pourquoi ne pas simplement utiliser une image animée au format gif ?
Re: faire une rotation continue sur une image en hover sur naviguation
Bonjour Hippocampe,
Pour la rotation (à l'infini) d'une image au survol, remplacer votre code CSS par ceci
Pour le HTML (non fournie à votre message), j'ai utiliser ceci.
P.S.: J'ai utilisé vos images, donc pas d'image ronde.
Pour la rotation (à l'infini) d'une image au survol, remplacer votre code CSS par ceci
- Code:
/*IMAGE ACCUEIL*/
#i_icon_mini_index {
background: yellow;
background-image: url('https://i.servimg.com/u/f32/11/94/15/08/accuei16.png'); /*image si la souris ne survole pas*/
width: 100px; /*Largeur de l'image*/
height: 100px; /*Hauteur de l'image*/
border:1px solid #000;
transform: skew(10deg);
-webkit-transform: skew(10deg);
box-shadow: 3px 3px 3px blue;
}
#i_icon_mini_index:hover {
background:#5eb2d9;
background-image:url('https://i.servimg.com/u/f32/11/94/15/08/accuei17.png'); /*image si la souris survole*/
width:100px; /*Largeur de l'image*/
height:100px; /*Hauteur de l'image*/
border:1px solid #000;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
box-shadow: 3px 3px 3px red;
}
@-webkit-keyframes rotating {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
.rotating:hover {
-webkit-animation: rotating 2s linear infinite;
}
Pour le HTML (non fournie à votre message), j'ai utiliser ceci.
- Code:
<div id='i_icon_mini_index' class="rotating"></div>
P.S.: J'ai utilisé vos images, donc pas d'image ronde.
Re: faire une rotation continue sur une image en hover sur naviguation
Merci Masdan,
j'essaye ca dans la matinée et je repasse te donner des news
ps : concernant le html, j'en ai pas , voila pourquoi je n'ai pas mis le code
j'essaye ca dans la matinée et je repasse te donner des news
ps : concernant le html, j'en ai pas , voila pourquoi je n'ai pas mis le code
Re: faire une rotation continue sur une image en hover sur naviguation
Merci Masdan et Neptunia aussi
Je clos
Je clos
Sujets similaires
» Faire tourner une image en continue avec du CSS
» Image new/no new hover.
» [codage] problème de rotation sur image
» hover image sur image barre navigation
» Barre de naviguation (image)
» Image new/no new hover.
» [codage] problème de rotation sur image
» hover image sur image barre navigation
» Barre de naviguation (image)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum