CSS3 Implementation of a moving menu button effect

This article introduces to you the content is about CSS3 implementation will move the menu button effect, there is a certain reference value, the need for friends can refer to, I hope to help you.

Need to do a will animation button effect, small front end do not know how to achieve, I looked at the effect of a need to write to him a simple demo .

The designer gave two pictures, one is 三 such a menu icon, and the other is the icon that becomes when clicked X . Hopefully between the two icons, there is an animated toggle effect.

Because the icons are very simple, we can use css these two icons to draw out, and then do an animation of the excessive effect on it. The code is as follows:

HTML code

  <p class= "box" >    <p class= "menu" ></p>  </p>

The outside .box just to open the page, no practical effect. Useful, is one .menu .

CSS Code

. box {margin:200px;}. menu {width:100px; height:100px; position:relative;}. Menu:before,. menu:after {content: ""; Display:block; width:100px; height:16px; Background: #000; border-radius:8px; Position:absolute; left:0; -webkit-transition:all 0.15s ease-in-out; Transition:all 0.15s ease-in-out; }.menu:before {top:5px; box-shadow:0 37px #000;}. Menu:after {bottom:5px;}. Menu:hover:before {top:42px; box-shadow:none;-webkit-transform:rotate (225deg); transform:rotate (225deg);}. menu:hover:after {bottom:42px;-webkit-transform:rotate (135deg); transform:rotate (135deg);}

Key explanations:

An element adds transition: all 0.15s ease-in-out; such a code, and when any of his attributes change, there is a toggle effect. For more information, please refer to the CSS3 transition property

Because there are three horizontal lines, so :before and :after two pseudo elements are not enough. I don't want to add an extra element, so there's more to control. So, I used a box-shadow: 0 37px #000; shadow of the way to achieve the middle of the effect of the horizontal line. :beforeand :after put them on top and bottom respectively.

Xwhen switching, only two elements, I just add the above to remove the shadow box-shadow: none; .

Then there is the change of position, and the addition is rotated. Position changes are not table. Rotation uses transform: rotate(225deg); this property to implement. For more information, please refer to the CSS3 transform property

The final results are as follows:

Well, the effect is realized. Above the animation I was put to switch implementation for 3 seconds, in order to see clearly the animation details effect.

In fact, will this idea, we can do a lot of simple animation effect.