Web design (5) 썸네일형 리스트형 [Navbar] Navbar color change animation - Html, CSS, JS ⭐ Navbar color change animation Navbar 높이만큼 스크롤 했을 때 투명한 Navbar의 색이 변하는 애니메이션 See the Pen oNYzoPp by Eunji Jeon (@emcjrl) on CodePen. E U N J I Home About Skills Work Contact * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; margin: 0; box-sizing: border-box; } a { text-decoration: none; color: #ffffff; } button { background-color: transparent; cursor: pointer; border: none.. [Navbar] 햄버거 메뉴 애니메이션2 - Html, CSS, JS ⭐ 햄버거 메뉴 애니메이션2 2nd bar가 옆으로 out되고, 1st, 3rd bar가 회전하며 X표시. See the Pen qBqZEje by Eunji Jeon (@emcjrl) on CodePen. body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333; } .menu-trigger, .menu-trigger span { display: inline-block; transition: all 0.4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 50px; height: 44px; } ... [Navbar] 햄버거 메뉴 애니메이션1 - Html, CSS, JS ⭐햄버거 메뉴 애니메이션 1 2nd bar는 투명하게 사라지고, 1st, 3rd bar가 회전하며 X표시. See the Pen ExNKxGR by Eunji Jeon (@emcjrl) on CodePen. body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333; } .menu-trigger, .menu-trigger span { display: inline-block; transition: all 0.4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 50px; height: 44px; } ... [Navbar] Change Menu Color - Html, CSS, JS Change Menu Color See the Pen abBbvxm by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS body { display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family:Georgia, 'Times New Roman', Times, serif; } .menu { display: flex; justify-content: center; } .menu_link { font-size: 1.2em; color: rgb(183, 202, 209); padding: 0 20px; list-style: .. [Navbar] Sliding Menu Indicator - Html, CSS, JS Sliding Menu Indicator See the Pen ExNxVJy by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: Georgia, "Times New Roman", Times, serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .navbar { position: relative; display: flex; } .navbar a { position: relative;.. 이전 1 다음
