啥（你的 Tap bar 不够花里胡哨，试试这个！）
作者：romaopedro199
译者：前端小智
来源：dev
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。今天，我们来做一个花里胡哨 Tap bar ，先来看下最终效果：
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
文章图片
接着，就把代码码起来了！
文章图片
HTML
在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;
}
}【啥（你的 Tap bar 不够花里胡哨，试试这个！）】自己慢慢消化，不想消化直接做个CV工程师。
JavaScript
文章图片
线上事例
https://codepen.io/romaopedro...
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://dev.to/romaopedro199/...
交流
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
文章图片
推荐阅读
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 为什么你的路演总会超时（）
- 奔向你的城市
- ?【段子图】内裤为啥湿呢（想想好邪恶啊...）
- 我来海边捡贝壳
- 下雪了，飞去你的城市拥抱你|下雪了，飞去你的城市拥抱你 | 有个直男向我表白了
- 如何有效沟通
- 不舍
- 【70号】Day26朋友日
- 我的前半生，你的余生。