728x90 반응형 CSS애니메이션2 [HTML/SCSS/jQuery] 모바일 내비게이션 메뉴 만들기 with 애니메이션 메뉴(햄버거 버튼) 클릭시 내비게이션이 슬라이드 되는 모바일 GNB 코드이다. 닫기 버튼 애니메이션에 노력을 기울임ㅋㅋ 클래스를 통해 영역을 left -100%에서 0%로 주면 슬라이드 된다. 여기에 transiton을 적용해면 자연스럽다. 닫기 버튼은 span으로 만들고 transform을 주어 메뉴버튼에서 닫기버튼으로 전환되게 만들었다. 그나자나 SCSS를 사용하다보니 CSS로 스타일링을 하려면 너무 귀찮다. SCSS 왕편함! &.on { left:0%; .btn_gnb__inner { transform:rotate(180deg); -webkit-transform:rotate(180deg); span { &:nth-of-type(1) {transform:rotate(45deg) translate(4p.. 2023. 2. 16. [HTML/CSS] pure css 원이 퍼지는 마우스오버 애니메이션 효과 마우스 오버 시, 원이 퍼지는 효과를 주는 코드이다. See the Pen circle animation on hover by nah (@wimmwell) on CodePen. 2022. 12. 29. 이전 1 다음 728x90 반응형
