Effets du menu de navigation créatif CSS3 pur-tutoriel CSS-php.cn

Effets du menu de navigation créatif CSS3 pur

黄舟

Libérer： 2017-01-17 17:39:17

original

2002 Les gens l'ont consulté

Bref tutoriel

Il s'agit d'un effet de menu de navigation CSS3 pur très créatif. Ce menu de navigation utilise principalement les méthodes de transformation et de transition CSS3 pour obtenir des effets, ce qui est très simple. Cet effet spécial est fourni par Attack of the Sun.

Utilisation

Structure HTML

Le menu de navigation utilise un élément

<nav>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Demos</a></li>
      <li><a href="#">中文</a></li>
  </ul>
</nav>

Copier après la connexion

Style CSS

Lorsque la souris glisse sur l'élément de menu, l'élément de menu aura une légère animation d'inclinaison et deux lignes glisseront au-dessus et en dessous de l'élément de menu. L'animation d'inclinaison de l'élément de menu utilise l'attribut transform pour faire pivoter et mettre à l'échelle l'élément de lien hypertexte lorsque l'élément de menu est survolé par la souris.

li a {
    display: block;
    font-size: 20px;
    text-align: center;
    padding: 10px 15px;
}
 
li a:hover {
    transform: rotate(5deg) scale(1.1);
}

Copier après la connexion

Les lignes supérieure et inférieure de l'élément de menu sont réalisées à l'aide des pseudo-éléments :before et :after de l'élément hyperlien. Ils commencent avec une transparence de 0 et une largeur de 0 et utilisent la propriété transform pour les faire pivoter et les déplacer.

li a:before, li a:after {
    opacity: 0;
    border-top: 1px solid white;
    content: &#39;&#39;;
    display: block;
    position: relative;
    z-index: -1;
    margin: auto;
    width: 0px;
}
 
li a:before {
    top: 0px;
    transform: rotate(120deg) translateY(-50%) translateX(-50%);
}
 
li a:after {
    top: 5px;
    transform: rotate(-60deg) translateY(-50%) translateX(-50%);
}

Copier après la connexion

Au survol de la souris, leur transparence passe à 1, leur largeur est fixée à 20 pixels et ils utilisent une transition douce avec l'effet de facilité.

li a:hover:before, li a:hover:after{
    transition: all 0.3s ease;
    opacity: 1;
    width: 20px;
}

Copier après la connexion

Ce qui précède est le contenu des effets spéciaux du menu de navigation créatif CSS3 pur. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !