63 lines
1.3 KiB
Plaintext
63 lines
1.3 KiB
Plaintext
|
.custom-tab-bar-wrapper {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding: 6rpx 0;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-tab-bar-wrapper .text {
|
||
|
|
font-size: 20rpx;
|
||
|
|
margin-top: 4rpx;
|
||
|
|
transition: all 0.25s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 自定义标签栏样式优化 */
|
||
|
|
.t-tab-bar {
|
||
|
|
box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.05);
|
||
|
|
border-top: none !important;
|
||
|
|
padding: 6rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 图标动画效果 */
|
||
|
|
.t-tab-bar-item--active .custom-tab-bar-wrapper .t-icon {
|
||
|
|
transform: translateY(-4rpx);
|
||
|
|
transition: all 0.25s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 选中状态文字效果 */
|
||
|
|
.t-tab-bar-item--active .custom-tab-bar-wrapper .text {
|
||
|
|
font-weight: 600;
|
||
|
|
transform: scale(1.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 涟漪效果 */
|
||
|
|
.t-tab-bar-item {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-tab-bar-item::after {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
background-image: radial-gradient(circle, var(--primary-color) 10%, transparent 10.01%);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: 50%;
|
||
|
|
transform: scale(10, 10);
|
||
|
|
opacity: 0;
|
||
|
|
transition: transform 0.5s, opacity 0.8s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-tab-bar-item:active::after {
|
||
|
|
transform: scale(0, 0);
|
||
|
|
opacity: 0.1;
|
||
|
|
transition: 0s;
|
||
|
|
}
|