css实现5种手机底部菜单选项卡导航条效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现5种手机底部菜单选项卡导航条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); /** @chrisbautista @codespud animated tabs using css transitions only. I wanted to test how much we can accomplish with just CSS transitions. **/ :root { --accent-color: #1fa8f5; --accent-color-fg: #fefefe; --backdrop-color: #89d4fe; --app-content-background-color: #c0d8ec; --inset-shadow: rgba(7, 43, 74, 0.3); --outset-shadow: rgba(223, 240, 255, 0.25); --clay-box-shadow: rgba(7, 43, 74, 0.3); --clay-background-color: #c0d8ec; --clay-fg-color: #444; } body { background-color: var(--backdrop-color); font-size: 10px; font-family: "Roboto", sans-serif; } .flex-center { display: flex; justify-content: space-around; align-items: center; } .container { padding: 1rem 1rem 1.5rem; } .stage { max-width: 400px; margin: 0 auto; } .home.active { color: var(--accent-color); } .home-style { --app-content-background-color: #c0d8ec; } .products.active { --outset-shadow: rgba(247, 167, 103, 0.45); --inset-shadow: rgba(149, 62, 8, 0.45); --clay-box-shadow: rgba(211, 69, 20, 0.4); --clay-background-color: #d34514; --clay-fg-color: #f1f2f3; color: #690c0c; } .products-style { --app-content-background-color: #d36e5a; } .services.active { --outset-shadow: rgba(255, 159, 40, 0.45); --inset-shadow: rgba(88, 54, 13, 0.45); --clay-box-shadow: rgba(88, 54, 13, 0.4); --clay-background-color: #ed9426; --clay-fg-color: #f1f2f3; color: #cf5c0f; } .services-style { --app-content-background-color: #ed9426; } .about.active { --outset-shadow: rgba(93, 255, 85, 0.45); --inset-shadow: rgba(28, 78, 26, 0.45); --clay-box-shadow: rgba(28, 78, 26, 0.4); --clay-background-color: #4dd146; --clay-fg-color: #f1f2f3; color: #4dd146; } .about-style { --app-content-background-color: #4dd146; } .help.active { --outset-shadow: rgba(230, 230, 230, 0.45); --inset-shadow: rgba(81, 81, 81, 0.45); --clay-box-shadow: rgba(81, 81, 81, 0.4); --clay-background-color: #a3a3a3; --clay-fg-color: #f1f2f3; color: #783896; } .help-style { --app-content-background-color: #a3a3a3; } .tabbar { background-color: var(--app-content-background-color); border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); height: 120px; display: flex; flex-direction: column; box-sizing: content-box; position: relative; overflow: hidden; transition: background-color 0.4s; } .tabbar ul, .tabbar li { list-style-type: none; margin: 0; padding: 0; } .tabbar ul { position: absolute; bottom: 0; width: 100%; background-color: #f9f8fa; align-self: flex-end; justify-content: center; height: 50px; } .tabbar li { display: flex; justify-content: center; align-items: center; font-size: 1rem; margin-right: 5px; transition: all 0.4s; background-color: #f9f8fa; width: 60px; height: 60px; position: relative; color: #888; } .tabbar li:last-child { margin-right: 0; } .tab-style1 ul { justify-content: center; } .tab-style1 li { display: flex; justify-content: center; align-items: center; top: 1px; left: 0; width: 60px; height: 50px; transition: top 0.2s ease-out, width 0.4s, border-radius 0.4s, box-shadow 0.4s; } .tab-style1 li.follow { position: absolute; border-radius: 100%; content: " "; width: 60px; height: 60px; border: 10px solid var(--app-content-background-color); background-color: var(--app-content-background-color); top: -3rem; transition: left 0.4s ease-in, background-color 0.4s, border-color 0.4s; } .tab-style1 li.follow:before, .tab-style1 li.follow:after { content: " "; position: absolute; top: 27px; right: -27px; border-top: 11px solid var(--app-content-background-color); background-color: #f9f8fa; width: 20px; height: 20px; box-sizing: border-box; transition: border-color 0.4s; } .tab-style1 li.follow::after { border-top-left-radius: 100%; } .tab-style1 li.follow:before { left: -27px; right: unset; border-top-right-radius: 100%; } .tab-style1 li:nth-child(1).active ~ .follow { left: 12px; } .tab-style1 li:nth-child(2).active ~ .follow { left: 75px; } .tab-style1 li:nth-child(3).active ~ .follow { left: 140px; } .tab-style1 li:nth-child(4).active ~ .follow { left: 205px; } .tab-style1 li:nth-child(5).active ~ .follow { left: 270px; } .tab-style1 .active { z-index: 100; width: 60px; height: 60px; top: -2rem; border-radius: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .tab-style2 ul { justify-content: center; } .tab-style2 li { border-top-left-radius: 100%; border-top-right-radius: 100%; display: flex; justify-content: center; align-items: center; top: 1px; left: 0; width: 60px; height: 50px; } .tab-style2 .active { width: 60px; height: 60px; top: -1rem; } .tab-style2 .active span { font-size: 2rem; } .tab-style2 .active:before, .tab-style2 .active:after { position: absolute; content: " "; width: 13px; height: 13px; border-bottom: 4px solid #f9f8fa; top: 8px; } .tab-style2 .active:before { border-bottom-right-radius: 100%; left: -7px; } .tab-style2 .active:after { border-bottom-left-radius: 100%; right: -7px; } .tab-style3 li { top: -8px; width: 60px; height: 35px; background-color: transparent; padding-top: 3px; } .tab-style3 li.follow { position: absolute; top: 0; display: flex; border-top: 3px solid #333; width: 60px; height: 1px; transition: all 0.3s ease-out; } .tab-style3 li:nth-child(1).active ~ .follow { left: 20px; z-index: 20; } .tab-style3 li:nth-child(2).active ~ .follow { left: 82px; z-index: 20; } .tab-style3 li:nth-child(3).active ~ .follow { left: 149px; z-index: 20; } .tab-style3 li:nth-child(4).active ~ .follow { left: 216px; z-index: 20; } .tab-style3 li:nth-child(5).active ~ .follow { left: 283px; z-index: 20; } .tab-style4 li { width: 60px; height: 40px; flex-direction: column; overflow: hidden; } .tab-style4 li span { position: relative; top: 3px; transition: top 0.4s ease-out, font-size 0.4s ease-out; text-shadow: inset 2px 2px 4px var(--clay-box-shadow); } .tab-style4 li:after { width: 100%; height: 10px; text-transform: uppercase; text-align: center; font-size: 8px; font-weight: bold; position: relative; bottom: -30px; opacity: 0; transition: bottom 0.4s ease-out, opacity 0.4s ease-out; } .tab-style4 li.active:after {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0