css单选radio按钮样式css多选框checkbox样式css响应式汉堡菜单(左滑、抽屉)css实现遮罩层弹出效果一组好看的css按钮效果(6种)css实现select下拉选择框css实现选项卡功能css实现下拉菜单css按钮样式代码(16种)css实现手风琴效果css图片轮播效果css进度条样式css实现侧边栏菜单css加载动画css背景动画效果css开关按钮样式(18种)css炫酷的圆形菜单css提示tooltip效果css手风琴_好看的Gallery伸缩效果css表格样式css分段控件导航栏css折角效果css粒子背景动画效果css进度圆圈连线css响应式分页样式代码css各种天气样式动画图标css层叠卡片滑出特效css下拉Dropdown菜单css圆圈按钮tip提示特效css和svg圆圈进度样式代码css动画404页面代码css爱心跳动动画代码css绘制逼真玻璃球效果css模拟开关灯特效创意css网格布局带动画效果css星级打分radio五角星css卡片悬浮翻转特效div上下浮动纯css动画css时间轴样式（timeLine）css文字循环翻滚动画效果css输入框动效css鼠标悬停缩放比例效果css模糊背景毛玻璃效果css实现小球循环跳动动画css实现标签样式Tagscss进度条阴影动画css绘制的小鸟css svg按钮冒泡动画特效css svg蓝色波浪动画特效css创意svg菜单栏水滴动画css文字进度条的实现CSS实现内容折叠/展开效果CSS3手机充电特效css实现鼠标点击拖拽效果CSS实现一个计时器纯CSS渐变绘制 Chrome 图标CSS 渐变来实现波浪动画
关闭
css创意svg菜单栏水滴动画
源码
<div class="tabs">
<!-- TAB 1 -->
<input type="radio" name="tab" id="tab-01" checked="">
<label for="tab-01">
<svg>
<use xlink:href="#icon-01" class="icon"></use>
</svg>
<div class="wave"></div>
</label>
<!-- TAB 2 -->
<input type="radio" name="tab" id="tab-02">
<label for="tab-02">
<svg>
<use xlink:href="#icon-02" class="icon"></use>
</svg>
<div class="wave"></div>
</label>
<!-- TAB 3 -->
<input type="radio" name="tab" id="tab-03">
<label for="tab-03">
<svg>
<use xlink:href="#icon-03" class="icon"></use>
</svg>
<div class="wave"></div>
</label>
<!-- TAB 4 -->
<input type="radio" name="tab" id="tab-04">
<label for="tab-04">
<svg>
<use xlink:href="#icon-04" class="icon"></use>
</svg>
<div class="wave"></div>
</label>
</div>
<!-- SVG -->
<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"></path>
<line x1="16" y1="10" x2="18" y2="10"></line>
<line x1="8" y1="10" x2="12" y2="10"></line>
<line x1="8" y1="15" x2="18" y2="15"></line>
</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"></path>
<polygon points="15 14.33 11 17 11 11.67 15 9 15 14.33"></polygon>
</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>
<path d="M15,23a2,2,0,0,1-4,0"></path>
<path d="M16,5.51A6.53,6.53,0,0,1,19.65,9.4"></path>
</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>
<path d="M18,18.26a8,8,0,0,1-10.09-.1"></path>
</symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
<clipPath id="path-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"></path>
</clipPath>
<clipPath id="path-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">
</path>
</clipPath>
<clipPath id="path-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>
</clipPath>
<clipPath id="path-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>
</clipPath>
</svg>
<style type="text/css">
body {
background: #eeeef5;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body .socials {
position: fixed;
display: block;
left: 20px;
bottom: 20px;
}
body .socials>a {
display: block;
width: 30px;
opacity: 0.2;
transform: scale(var(--scale, 0.8));
transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
body .socials>a:hover {
--scale: 1;
}
.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: flex;
justify-content: space-around;
align-items: center;
padding: 0 15px;
box-sizing: border-box;
overflow: hidden;
}
.tabs label {
width: 26px;
height: 26px;
cursor: pointer;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
transform-origin: center bottom;
}
.tabs label::before {
content: "";
height: 4px;
width: 4px;
border-radius: 0% 100% 50% 50%/0% 50% 50% 100%;
transform: scale(1, 1) rotate(45deg);
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;
transition: stroke 0.15s linear 0.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;
animation: wave-animation 3s linear infinite;
transition: bottom 0.15s ease-out 0.35s;
}
.tabs label .wave::before {
background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
animation-duration: 2s;
opacity: 0.5;
}
.tabs label .wave::after {
background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
animation-duration: 3s;
}
.tabs label:nth-of-type(1) .wave {
clip-path: url(#path-icon-01);
}
.tabs label:nth-of-type(2) .wave {
clip-path: url(#path-icon-02);
}
.tabs label:nth-of-type(3) .wave {
clip-path: url(#path-icon-03);
}
.tabs label:nth-of-type(4) .wave {
clip-path: url(#path-icon-04);
}
.tabs input {
display: none;
}
.tabs input:checked+label {
animation: wiggle-animation 1s ease 0.3s;
}
.tabs input:checked+label::before {
animation: drop-animation 0.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;
}
@keyframes wiggle-animation {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-7deg);
}
60% {
transform: rotate(7deg);
}
90% {
transform: rotate(-3deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wave-animation {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
@keyframes drop-animation {
70% {
transform: scale(0.8, 3) rotate(45deg);
top: -7px;
}
100% {
transform: scale(1.5, 0.5) rotate(45deg);
top: 19px;
}
}
</style>