Pure CSS3 creative navigation menu effects

Brief Tutorial

This is a very creative pure CSS3 navigation menu effect. This navigation menu mainly uses CSS3 transform and transition methods to achieve effects, which is very simple. This special effect is provided by Attack of the Sun.

How to use

HTML structure

The navigation menu uses a

element to wrap an unordered list.

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

CSS Style

When the mouse slides over the menu item in this navigation menu, the menu item has a slight tilt animation, and two lines will slide out above and below the menu item. The menu item's tilt animation uses the transform attribute to rotate and scale the hyperlink element when the menu item is rolled over by the mouse.

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

The upper and lower lines of the menu item are made using the :before and :after pseudo-elements of the hyperlink element. They start with 0 transparency and 0 width, and use the transform property to rotate and move them.

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

As the mouse rolls over, their transparency changes to 1, their width is set to 20 pixels, and they use a smooth transition of the ease effect.

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

The above is the content of pure CSS3 creative navigation menu special effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!