<div class="box">
<div class="container">
<div class="item" v-for="(el,index) in item" :key="index" @click="isNum=index" :class="isNum==index?'active':''">
<img :src="el.imge" alt="">
<p class="text">{{el.name}}</p>
</div>
<div class="plus"></div>
</div>
</div>
data() {
return {
isNum: 1,
item: [
{ imge: require('../assets/20.png'), name: '首页' },
{ imge: require('../assets/30.png'), name: '首页' },
{ imge: require('../assets/40.png'), name: '首页' },
{ imge: require('../assets/50.png'), name: '首页' },
]
}
}
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 400px;
height: 70px;
background-color: blue;
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
color: #fff;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, 100%);
}
.container .item img {
width: 20px;
height: 20px;
}
.container .item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.plus {
position: absolute;
left: 10px;
top: -58%;
background-color: rgb(231, 209, 7);
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 6px solid #fff;
/* 过渡 */
transition: 0.5s;
}
/* 圆弧 */
.plus::before {
content: "";
position: absolute;
/* background: blue; */
border-top-right-radius: 20px;
width: 20px;
height: 20px;
top: 50%;
left: -20px;
box-shadow: 0 -10px 0 0 #fff;
}
.plus::after {
content: "";
position: absolute;
border-top-left-radius: 20px;
width: 20px;
height: 20px;
top: 50%;
right: -20px;
box-shadow: 0 -10px 0 0 #fff;
}
/* 选中样式 未选中样式 */
/* 未选中样式 文字 位移 不显示 */
.container .item img {
position: absolute;
font-size: 24px;
/* 过渡 */
transition: 0.5s;
}
.text {
opacity: 0;
font-weight: 600;
transform: translateY(20px);
/* 过渡 */
transition: 0.5s;
}
/* 选中样式 */
.item.active img {
transform: translateY(-30px);
z-index:99;
}
.item.active .text {
opacity: 1;
transform: translateY(15px);
}
.item:nth-child(1).active ~ .plus {
transform: translateX(calc(100px * 0));
}
.item:nth-child(2).active ~ .plus {
transform: translateX(calc(100px * 1));
}
.item:nth-child(3).active ~ .plus {
transform: translateX(calc(100px * 2));
}
.item:nth-child(4).active ~ .plus {
transform: translateX(calc(100px * 3));
}
文章来源地址https://www.toymoban.com/news/detail-627647.html
文章来源:https://www.toymoban.com/news/detail-627647.html
到了这里,关于tabbar导航栏动画 自定义的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!