Pure CSS3 Creative navigation menu effects

Brief tutorials

This is a very creative pure CSS3 navigation menu effect. This navigation menu is mainly achieved through the CSS3 transform and Transition methods, which is very simple. This effect is provided by the attacking Ho.

How to use

HTML structure

The navigation menu uses a <nav> element to wrap a set of unordered lists.

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

CSS Styles

The navigation menu has a slightly skewed animation of the menu item when the mouse is over the menu item, and two lines slide out of the menu item. The italic animation for a menu item is to rotate and scale the hyperlink element by using the Transform property when it is mouse-over.

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

The top and bottom 2 lines of a menu item are made using the hyperlink element: Before and: after pseudo-elements. They start with a transparency of 0, a width of 0, 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%);}

When the mouse is out-of-date, their transparency changes to 1, the width is set to 20 pixels, and a smooth transition with the ease effect.

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

The above is pure CSS3 Creative navigation menu effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

