• 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 a

    On 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;
    }

    « Derniers visiteurs caché qui coulisse survol souris ಠ⌣ಠCouleurs par nom anglais »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags : ,
  • Commentaires

    Aucun commentaire pour le moment



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl