Location:Home > JS special effects code > CSS3 animation

CSS3 expandable button menu material design Material Design

2020-06-25 140views
This is a cool material design style open menu button effect. There are seven different effects in this special effect. In each effect, a group of main menu buttons can be opened by clicking the main menu button. The animation effects of various opening sub menus are different. The first effect is that when you click the main menu button, the main menu button will move to the left, and the main menu button will appear in turn with the main menu button moving. The second effect is that after clicking the main menu button, a circular mask layer will appear, and the four sub menu buttons will appear in the upper, lower, left and right positions of the circular mask layer. The third effect is that after clicking the main menu button, the sub menu button will appear above the main menu button from bottom to top. The fourth effect is that after clicking the main menu button, the sub menu button will slide on both sides of the main menu button. The fifth effect is that after clicking the main menu button, the sub menu button will pop up from the position of the main menu button and appear in turn. The sixth effect is that after clicking the main menu button, the sub menu buttons appear on both sides of the main menu button, and then rotate 360 degrees around the main menu button. The seventh effect is to click the main menu button, four sub menu buttons appear in turn, around the main menu button