A concise pure CSS3 code Implementation of the animated navigation

Before you introduced a lot of navigation menu, today to share a concise pure CSS3 code Implementation of the animation navigation. When the mouse passes through the background color with a diamond gradient as a rectangle. As follows:

Online preview Source Download

The implemented code.

HTML code:

  <DivAlign= "Center"style= "Background-color: #ee1d27; padding:20px;">        <Divclass= "Contener_link">            <Divclass= "Link_txt">MENU One</Div>        </Div>        <Divclass= "Contener_link">            <Divclass= "Link_txt">MENU</Div>        </Div>        <Divclass= "Contener_link">            <Divclass= "Link_txt">MENU Three</Div>        </Div>    </Div>

CSS3 Code:

. Contener_link{text-align:Center;position:relative;width:170px;Height:50px;cursor:Pointer;Display:Inline-block;}. Contener_link. Link_txt{font-family:' Roboto ';position:Absolute;width:150px;Font-weight: -;text-decoration:None;font-size:22px;padding:10px;Color:#ffffff;}. Contener_link:hover{Background-color:#f8b334;-webkit-animation-duration:1s;-webkit-animation-name:Diaganim;-moz-animation-duration:1s;-moz-animation-name:Diaganim;-ms-animation-duration:1s;-ms-animation-name:Diaganim;animation-duration:1s;Animation-name:Diaganim;}@-webkit-keyframes Diaganim{0% {-webkit-transform:skewx ( -80deg);}100%{-webkit-transform:skewx (0deg);}}@-moz-keyframes Diaganim{0% {-moz-transform:skewx ( -80deg);}100%{-moz-transform:skewx (0deg);}}@-ms-keyframes Diaganim{0% {-ms-transform:skewx ( -80deg);}100%{-ms-transform:skewx (0deg);}} @keyframes Diaganim{0% {Transform:skewx ( -80deg);}100%{Transform:skewx (0deg);}}

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/9607

A concise, pure CSS3 Code implementation of animated navigation