햄버거메뉴
-
햄버거 메뉴 라인 애니메이션 (SVG & CSS)CSS 2021. 2. 12. 21:14
모바일 환경에서 많이들 사용하는 햄버거 메뉴는 애니메이션을 많이 넣어서들 사용합니다. SVG 및 CSS를 사용하여 다양한 효과들을 만들 수 있습니다. 우선 SVG를 적절히 그려서 애니메이션을 위한 라인들을 그립니다. body { align-items: center; display: flex; justify-content: center; height: 100vh; margin: 0; } .menu { background-color: transparent; border: none; cursor: pointer; display: flex; padding: 0; } .line { fill: none; stroke: black; stroke-width: 6; transition: stroke-dasharray 6..