/* styles.css */
.toast {
    visibility: hidden;
    /* 初始化状态为不可见 */
    min-width: 250px;
    /* Toast的最小宽度 */
    margin-left: -125px;
    /* 居中显示 */
    background-color: #333333;
    /* 背景颜色 */
    color: #fff;
    /* 字体颜色 */
    text-align: center;
    /* 文字居中 */
    border-radius: 2px;
    /* 圆角 */
    padding: 16px;
    /* 内边距 */
    position: fixed;
    /* 固定定位 */
    z-index: 1;
    /* 确保在其它元素上面 */
    left: 50%;
    /* 左边距50% */
    bottom: 50%;
    /* 距离底部30px */
    font-size: 17px;
    /* 字体大小 */
}

.toast.show {
    visibility: visible;
    /* 显示Toast */
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
    /* 采用动画效果 */
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    /* 动画开始位置 */
    to {
        bottom: 50%;
        opacity: 1;
    }

    /* 动画结束位置 */
}

@keyframes fadeout {
    from {
        bottom: 50%;
        opacity: 1;
    }

    /* 动画开始位置 */
    to {
        bottom: 0;
        opacity: 0;
    }

    /* 动画结束位置 */
}