first commit

custom-tab-bar/index.wxss

@@ -0,0 +1,62 @@
+.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;
+}