一款带果冻切换效果的移动菜单导航栏

mobile navigation bar with ionicons

h5, svg, gooey, bar, menu

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2631
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
nav {
    width: 440px;
}
.wave-wrap {
    position: relative;
    width: 100%;
    height: 33px;
    overflow: hidden;
    margin-bottom: 0;
}
.wave-wrap #wave {
    position: absolute;
    width: 150px;
    transform-origin: bottom;
    transform: scaleY(0.8);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.wave-wrap #wave .path {
    fill: #2f3542;
}
.list-wrap {
    display: flex;
    width: 100%;
    height: 80px;
    background: #2f3542;
    list-style: none;
    justify-content: space-around;
    padding: 0 20px;
}
.list-wrap li {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.list-wrap li i {
    position: relative;
    font-size: 1.5em;
    color: #a4b0be;
    z-index: 5;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.list-wrap li:before {
    content: "";
    position: absolute;
    background: green;
    height: 80%;
    width: 80%;
    left: 10%;
    top: 10%;
    border-radius: 50%;
    z-index: 0;
    transform: scale(0);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.list-wrap li.active {
    margin-top: -10px;
}
.list-wrap li.active i {
    color: #2f3542;
}
.list-wrap li.active:before {
    transform: scale(1);
}
.list-wrap li:nth-child(1):before {
    background: #eccc68;
}
.list-wrap li:nth-child(2):before {
    background: #ff6b81;
}
.list-wrap li:nth-child(3):before {
    background: #7bed9f;
}
.list-wrap li:nth-child(4):before {
    background: #70a1ff;
}
.list-wrap li:nth-child(5):before {
    background: #dfe4ea;
}
.phone {
    height: 300px;
    border: 7px solid rgba(47, 53, 66, 0.05);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
}
.phone .page {
    height: 327px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    color: rgba(47, 53, 66, 0.1);
    text-transform: uppercase;
    letter-spacing: 5pt;
    padding-top: 50px;
}

HTML

</div>

mobile navigation bar with ionicons

h5, svg, gooey, bar, menu

编辑器支持Emmet

快捷键

mobile navigation bar with ionicons

h5, svg, gooey, bar, menu

简单易用的一款纯CSS移动导航菜单

一款带屋檐滴雨动效的汉堡菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：