Effets du menu de navigation créatif CSS3 pur

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>

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

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: '';
    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%);
}

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

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 (www.php.cn) !