小程序实现TabBar创意动画(文末附完整源代码)

NO.1

• 核心css代码(完整代码见文末)：

    .tabbar .item .text{
        position: absolute;
        width: 100%;
        bottom: 10rpx;
        text-align: center;
        font-size: 22rpx;
        opacity: 0;
        transition: all .8s;
        transform: scale(0.8);
        width: 100%;
    }
    .tabbar .item.active .text{
        opacity: 1;
        transform: scale(1);
    }

    .tabbar .item.active .icon{
        color: #3561f5;
        transform: translateY(-55rpx);
    }

    .tabbar .item .icon{
        font-size: 50rpx!important;
        text-align: center;
        transition: all .8s;
    }

NO.2

NO.3

结尾