<style>
.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;
}
}
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;
}
</style>
<body>
<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" />
</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" />
</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" />
</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" />
</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" />
<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>
<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" />
</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" />
</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" />
</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" />
</clipPath>
</svg>
<!--- ## DRIBBBLE + TWITTER ############# -->
<div class="socials">
<a class="dribbble" href="https://dribbble.com/shots/9713873-Tabbar-animation-CodePen" target="_blank"><svg
xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd" fill="black"
d="M16 0C7.16703 0 0 7.16703 0 16C0 24.833 7.16703 32 16 32C24.8156 32 32 24.833 32 16C32 7.16703 24.8156 0 16 0ZM26.5683 7.37527C28.4772 9.70065 29.6226 12.6681 29.6573 15.8785C29.2061 15.7918 24.6941 14.872 20.1475 15.4447C20.0434 15.2191 19.9566 14.9761 19.8525 14.7332C19.5748 14.0738 19.2625 13.397 18.9501 12.7549C23.9826 10.7072 26.2733 7.75705 26.5683 7.37527ZM16 2.36009C19.4707 2.36009 22.6464 3.66161 25.0586 5.7961C24.8156 6.14317 22.7505 8.90239 17.8915 10.7245C15.6529 6.61171 13.1714 3.24512 12.7896 2.72451C13.8134 2.48156 14.8894 2.36009 16 2.36009ZM10.1866 3.64425C10.551 4.13015 12.9805 7.5141 15.2538 11.5401C8.86768 13.2408 3.22777 13.2061 2.62039 13.2061C3.50542 8.9718 6.36876 5.44902 10.1866 3.64425ZM2.32538 16.0174C2.32538 15.8785 2.32538 15.7397 2.32538 15.6009C2.9154 15.6182 9.54447 15.705 16.3644 13.6573C16.7636 14.4208 17.128 15.2017 17.4751 15.9826C17.3015 16.0347 17.1106 16.0868 16.9371 16.1388C9.89154 18.4121 6.14317 2
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
前端动画素材在网页开发中扮演着重要角色,能够吸引用户注意、提升用户体验。以下是一些常见的前端动画素材的技术实现方式: CSS 动画:使用 CSS 属性(如@keyframes、transition、transform等)来实现动画效果。这种方式简单易用,适合实现简单的动画效果,如过渡、旋转、缩放等。 JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式属性,实现更复杂、交互性更强的动画效果。常见的库包括 jQuery、Anime.js、GreenSock(GSAP)等,它们提供了丰富的动画函数和效果,使动画开发更加高效。 SVG 动画:使用 SVG(可缩放矢量图形)和 SMIL(同步多媒体集成语言)技术创建矢量图形动画,可以实现复杂的矢量图形动画效果,如路径动画、填充动画等。 Canvas 动画:通过 HTML5 Canvas 元素绘制图形,利用 JavaScript 控制绘制过程,实现高度可定制化的动画效果,适用于需要实时渲染的复杂动画场景。 WebGL 动画:基于 WebGL(Web图形库)的 3D 图形渲染技术,可以实现高性能的复杂动画效果,适合开发需要展示 3D 动画的网页。 React 动画库:如果你在使用 React 框架,可以考虑使用像 React Spring、Framer Motion 等专门为 React 设计的动画库,简化动画开发流程。 CSS 预处理器:使用像 Sass、Less 等 CSS 预处理器可以简化 CSS 编写过程,提高样式代码的可维护性,进而对动画效果的实现有所帮助。 综上所述,前端动画素材的技术实现方式多种多样,开发者可以根据项目需求和个人技术偏好选择合适的方式来实现动画效果。
资源推荐
资源详情
资源评论
收起资源包目录
【前端素材】模板-多种实用tabbar+menu.zip (14个子文件)
tabbar+menu
index3gsap.htm 19KB
menu03.htm 1KB
menu.htm 3KB
index2.html 6KB
倾斜菜单.htm 6KB
drop down menu.htm 4KB
tabbar.htm 12KB
index6.htm 7KB
index8.htm 11KB
index7.htm 14KB
menu02.htm 3KB
onlycssindex5.htm 16KB
index4.htm 18KB
index1.html 9KB
共 14 条
- 1
资源评论
枫蜜柚子茶
- 粉丝: 6242
- 资源: 4607
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功