위치:홈페이지 > JS 특수 효과 코드 > CSS3 애니메이션

CSS3 확장 가능한 버튼 메뉴 머티리얼 디자인 머티리얼 디자인

2020-06-25 103조회 수
이것은 멋진 소재 디자인 스타일의 메뉴 열기 버튼 효과입니다. 이 특수 효과에는 7 가지 효과가 있습니다. 각 효과에서 메인 메뉴 버튼을 클릭하여 메인 메뉴 버튼 그룹을 열 수 있습니다. 다양한 여는 하위 메뉴의 애니메이션 효과는 다릅니다. 첫 번째 효과는 메인 메뉴 버튼을 클릭하면 메인 메뉴 버튼이 왼쪽으로 이동하고 메인 메뉴 버튼이 움직이면서 차례로 메인 메뉴 버튼이 나타납니다. 두 번째 효과는 메인 메뉴 버튼을 클릭하면 원형 마스크 레이어가 나타나고 원형 마스크 레이어의 상하 좌우 위치에 4 ​​개의 하위 메뉴 버튼이 나타납니다. 세 번째 효과는 메인 메뉴 버튼을 클릭하면 하위 메뉴 버튼이 메인 메뉴 버튼 위에 아래에서 위로 나타납니다. 네 번째 효과는 메인 메뉴 버튼을 클릭하면 하위 메뉴 버튼이 메인 메뉴 버튼의 양쪽으로 미끄러지는 것입니다. 다섯 번째 효과는 메인 메뉴 버튼을 클릭하면 메인 메뉴 버튼 위치에서 하위 메뉴 버튼이 팝업되어 차례로 나타납니다. 여섯 번째 효과는 메인 메뉴 버튼을 클릭하면 서브 메뉴 버튼이 메인 메뉴 버튼 양쪽에 나타나고 메인 메뉴 버튼을 중심으로 360도 회전한다는 것입니다. 일곱 번째 효과는 메인 메뉴 버튼을 클릭하는 것입니다. 메인 메뉴 버튼 주위에 4 개의 하위 메뉴 버튼이 차례로 나타납니다.