svg和css实现标签栏（导航栏）水滴动画

tab bar ( navigation bar ) water dropping animation，常用页面控件，简单实用的一个交互动效。

svg, tabs, water

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.tabs {
    --background: #FFFFFF;
    --light-grey: #C6CFD9;
    --wave-color: #2AC8DD;
    --width: 300px;
    --height: 75px;
    --border-radius: var(--height);
    background: var(--background);
    width: var(--width);
    height: var(--height);
    padding: 0;
    position: relative;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
    -webkit-box-align: center;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: hidden;
}
.tabs label {
    width: 26px;
    height: 26px;
    cursor: pointer;
    position: relative;
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
    -webkit-box-align: center;
    align-items: center;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
.tabs label::before {
    content: "";
    height: 4px;
    width: 4px;
    border-radius: 0% 100% 50% 50% / 0% 50% 50% 100%;
    -webkit-transform: scale(1, 1) rotate(45deg);
    transform: scale(1, 1) rotate(45deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background: var(--wave-color);
    display: block;
    position: absolute;
    top: -30px;
}
.tabs label svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.tabs label svg .icon {
    fill: none;
    stroke: var(--light-grey);
    stroke-dashoffset: 98;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    -webkit-transition: stroke .15s linear .3s;
    transition: stroke .15s linear .3s;
}
.tabs label .wave {
    height: 26px;
    width: 26px;
    position: absolute;
    overflow: hidden;
}
.tabs label .wave::before,
.tabs label .wave::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    right: 0;
    background-repeat: repeat;
    height: 14px;
    width: 48px;
    background-size: 12px 12px;
    -webkit-animation: wave-animation 3s linear infinite;
    animation: wave-animation 3s linear infinite;
    -webkit-transition: bottom .15s ease-out .35s;
    transition: bottom .15s ease-out .35s;
}
.tabs label .wave::before {
    background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    opacity: .5;
}
.tabs label .wave::after {
    background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
.tabs label:nth-of-type(1) .wave {
    -webkit-clip-path: url(#path-icon-01);
    clip-path: url(#path-icon-01);
}
.tabs label:nth-of-type(2) .wave {
    -webkit-clip-path: url(#path-icon-02);
    clip-path: url(#path-icon-02);
}
.tabs label:nth-of-type(3) .wave {
    -webkit-clip-path: url(#path-icon-03);
    clip-path: url(#path-icon-03);
}
.tabs label:nth-of-type(4) .wave {
    -webkit-clip-path: url(#path-icon-04);
    clip-path: url(#path-icon-04);
}
.tabs input {
    display: none;
}
.tabs input:checked + label {
    -webkit-animation: wiggle-animation 1s ease .3s;
    animation: wiggle-animation 1s ease .3s;
}
.tabs input:checked + label::before {
    -webkit-animation: drop-animation .35s ease-in both;
    animation: drop-animation .35s ease-in both;
}
.tabs input:checked + label svg .icon {
    stroke: #4B4B4B;
}
.tabs input:checked + label .wave:before {
    bottom: 0;
}
.tabs input:checked + label .wave:after {
    bottom: -4px;
}
@-webkit-keyframes wiggle-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    60% {
        -webkit-transform: rotate(7deg);
        transform: rotate(7deg);
    }
    90% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes wiggle-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    60% {
        -webkit-transform: rotate(7deg);
        transform: rotate(7deg);
    }
    90% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes wave-animation {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
@keyframes wave-animation {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
@-webkit-keyframes drop-animation {
    70% {
        -webkit-transform: scale(0.8, 3) rotate(45deg);
        transform: scale(0.8, 3) rotate(45deg);
        top: -7px;
    }
    100% {
        -webkit-transform: scale(1.5, 0.5) rotate(45deg);
        transform: scale(1.5, 0.5) rotate(45deg);
        top: 19px;
    }
}
@keyframes drop-animation {
    70% {
        -webkit-transform: scale(0.8, 3) rotate(45deg);
        transform: scale(0.8, 3) rotate(45deg);
        top: -7px;
    }
    100% {
        -webkit-transform: scale(1.5, 0.5) rotate(45deg);
        transform: scale(1.5, 0.5) rotate(45deg);
        top: 19px;
    }
}
body {
    background: #eeeef5;
    height: 100vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
body .socials {
    position: fixed;
    display: block;
    left: 20px;
    bottom: 20px;
}
body .socials > a {
    display: block;
    width: 30px;
    opacity: .2;
    -webkit-transform: scale(var(--scale, 0.8));
    transform: scale(var(--scale, 0.8));
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
    transition: -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
    transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
    transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91), -webkit-transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
body .socials > a:hover {
    --scale: 1;
}

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-01">
        <path d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47" />
        <line x1="16" y1="10" x2="18" y2="10" />
        <line x1="8" y1="10" x2="12" y2="10" />
        <line x1="8" y1="15" x2="18" y2="15" />
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-02">
        <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1" />
        <polygon points="15 14.33 11 17 11 11.67 15 9 15 14.33" />
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-03">
        <path d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1" />
        <path d="M15,23a2,2,0,0,1-4,0" />
        <path d="M16,5.51A6.53,6.53,0,0,1,19.65,9.4" />
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-04">
        <path d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1" />
        <path d="M18,18.26a8,8,0,0,1-10.09-.1" />
    </symbol>
</svg>

tab bar ( navigation bar ) water dropping animation，常用页面控件，简单实用的一个交互动效。

svg, tabs, water

编辑器支持Emmet

快捷键

tab bar ( navigation bar ) water dropping animation，常用页面控件，简单实用的一个交互动效。

svg, tabs, water

学习使用svg和css实现动物动画片段（猫狗）

gsap和svg filter实现乱流（turbulence）加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：