你的|你的 Tap bar 不够花里胡哨，试试这个！
作者：romaopedro199
译者：前端小智
来源：dev
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。今天，我们来做一个花里胡哨 Tap bar ，先来看下最终效果：
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
文章图片
接着，就把代码码起来了！
文章图片
HTML
【你的|你的 Tap bar 不够花里胡哨，试试这个！】在HTML代码中，
"bar" 类是点击栏的容器，"bar-item"类是触发动画的按钮。现在接着码 CSS。CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #fc5c65;
}.bar {
padding: 0px 10px;
display: flex;
align-items: center;
background-color: #ffffff;
border-radius: 10px 10px 20px 20px;
box-shadow: 3px 3px 0px 0px rgb(235 59 90);
}.bar .bar-item {
position: relative;
overflow: hidden;
padding: 20px 25px;
cursor: pointer;
}.bar .bar-item i {
z-index: 1;
position: relative;
color: #a4b0be;
transition: all .3s ease-in-out;
}.bar .bar-item.pre-active i {
color: #fc5c65;
}.bar .bar-item.active i {
color: #fc5c65;
animation: colour 1s ease-in-out;
}.bar .bar-item.active .bar-fluid {
position: absolute;
top: 0px;
left: 0px;
background-color: #fc5c65;
width: 100%;
height: 0px;
animation: fluid 1s ease-in-out;
}.bar .bar-item.active .bar-fluid:before {
content: '';
position: absolute;
top: 0px;
left: -50%;
background-color: #ffffff;
width: 110%;
height: 400%;
border-radius: 50%;
}.bar .bar-item.active .bar-fluid:after {
content: '';
position: absolute;
top: 0px;
right: -50%;
background-color: #ffffff;
width: 110%;
height: 400%;
border-radius: 50%;
}.bar .bar-item.active .drop {
position: absolute;
top: -2.5px;
left: 30.5px;
background-color: #fc5c65;
width: 2.5px;
height: 2.5px;
border-radius: 50%;
animation: drop 1s ease-in-out;
}@keyframes colour {
0% { color: #a4b0be;
}
55% {
color: #a4b0be;
transform: scale(1);
}
60% {
color: #fc5c65;
transform: scale(1);
}
70% { transform: scale(1.1);
}
80% { transform: scale(1);
}
}@keyframes fluid {
0% { height: 0px;
}
30% { height: 10px;
}
100% { height: 0px;
}
}@keyframes drop {
20% { top: -2.5px;
}
50% { top: 21px;
}
51% { top: -2.5px;
}
}自己慢慢消化，不想消化直接做个CV工程师。
JavaScript
文章图片
线上事例
https://codepen.io/romaopedro...
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://dev.to/romaopedro199/...
交流
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
文章图片
推荐阅读
- iOS开发之修改UISearchBar的背景颜色
- 通识教育2（为什么父母教你的可能是错的（））
- 打卡10‖无处不在的自证预言
- 你听的每一首音乐，都暴露了你的修养
- 业务可视化-让你的流程图＂Run＂起来(4.实际业务场景测试)
- 情书｜我只是你的两万分之一，而你是我的唯一
- 有欧盟CE认证|有欧盟CE认证 接地气 高质量的市场 颠覆你的玩具观
- 陶醉在你的声音里
- 在APP中，Tab|在APP中，Tab bar是否要固定
- 最怕你的突然联系……