啥?你的 Tap bar 不够花里胡哨,试试这个!
2023-03-31 10:34:29 时间
今天,我们来做一个花里胡哨 Tap bar ,先来看下最终效果:
接着,就把代码码起来了!
HTML
<div class="container">
<div class="bar">
<div class="bar-item pre-active" onclick="changeActive(this)">
<div class="bar-fluid"></div>
<div class="drop"></div>
<i class="far fa-calendar-alt"></i>
</div>
<div class="bar-item" onclick="changeActive(this)">
<div class="bar-fluid"></div>
<div class="drop"></div>
<i class="far fa-sticky-note"></i>
</div>
<div class="bar-item" onclick="changeActive(this)">
<div class="bar-fluid"></div>
<div class="drop"></div>
<i class="far fa-bell"></i>
</div>
<div class="bar-item" onclick="changeActive(this)">
<div class="bar-fluid"></div>
<div class="drop"></div>
<i class="far fa-address-book"></i>
</div>
</div>
</div>
复制代码
在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
线上事例
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
相关文章
- 没有硬件的苹果发布会:中年危机的解药
- 苹果发布会亮点汇总:这些东西值得一看
- 十多年后,我们终于看到了初代 iPhone 原型机巨大的红色开发板
- 苹果进行iPhone问世后重大转型:硬件时代转向互联网服务
- 新一代iPad真香,但苹果重回昔日巅峰还差得远
- 继苹果iCloud服务出现大面积瘫痪之后 Siri也中招了
- 另一种绕过 Android P以上非公开API限制的办法
- 专利曝光!谷歌即将推出可折叠智能手机
- 苹果宣布今年WWDC将于6月3日举行 新系统要来了
- css中z-index属性
- css中translate函数的用法
- css中transition方法的介绍
- css中align-content属性是什么
- css中flex-flow属性是什么
- css中flex-wrap属性是什么
- css中flex-direction属性是什么
- css中order属性的介绍
- css中flex-shrink属性是什么
- css相邻兄弟选择器是什么
- json格式字符串