-
Boutons de menu qui tournent
Faire tourner les boutons du menu avec un arrêt au survol souris
Il s'agit d'une rotation de 360 degrés infinie appliquée au sélecteur
#menu li aOn peut également redéfinir la dimension de chaque bouton ; par exemple, les faire entièrement rond.
Ci-dessous, CSS pour des boutons du menu de l'en tête de 100px de diamètre.
CSS à adapter et à ajouter dans "modifier le thème", "ajouter du CSS"
#menu li a{
height: 100px;/*hauteur du bouton*/
width: 100px;/*largeur du bouton*/
text-align: center;
background-color: #a0eca2;/*couleur de fond*/
border-top: 3px double #B29C82;/*bordures*/
border-right: 3px double #B29C82;
border-bottom: 3px double #B29C82;
border-left: 3px double #B29C82;
font-family: Verdana, Geneva, sans-serif;/*police du texte*/
font-size: 14px;/*taille police*/
font-weight: bold;/*texte eb gras*/
text-decoration: none;
margin-right: 20px;/*marge extérieure droite pour écarter les boutons*/
padding-top: 24px;/*marge intérieure haute*/
border-radius: 66px;/*arrondis*/
-webkit-animation:tourne 4s linear infinite;/*declaration de l'animation*/
-moz-animation:tourne 4s linear infinite;
animation:tourne 4s linear infinite;
}
@-moz-keyframes tourne { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes tourne { 100% { -webkit-transform: rotate(360deg); } }
@keyframes tourne { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
}
#menu li a:hover {/*pause au survol souris*/
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
animation-play-state:paused;}
#menu ul a {
height: 20px;
padding-right: 50px;
}
Tags : bouton qui tourne, menu entête
-
Commentaires
Aucun commentaire pour le moment
Ajouter un commentaire