怎样用CSS操作数据提示信息—toast通知设计

<div id="myToast" class="toast hidden">
    <p>操作成功！您的设置已保存。</p>
    <button class="toast-close-btn">&times;</button>
</div>

.toast {
    position: fixed; /* 关键：固定在视口中 */
    bottom: 20px;    /* 离底部20px */
    right: 20px;     /* 离右边20px */
    background-color: rgba(50, 50, 50, 0.9); /* 半透明深色背景 */
    color: white;    /* 白色文字 */
    padding: 12px 20px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    z-index: 1000;   /* 确保在其他内容之上 */
    font-family: sans-serif; /* 字体设置 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 轻微阴影 */
    opacity: 0;      /* 初始状态隐藏，通过透明度控制 */
    visibility: hidden; /* 初始状态不可见，避免占据空间 */
    transform: translateY(20px); /* 初始位置略微向下，为上滑动画做准备 */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s; /* 过渡效果 */
    display: flex; /* 内部布局，让内容和关闭按钮对齐 */
    align-items: center;
    gap: 10px; /* 元素间距 */
}

.toast.show {
    opacity: 1;      /* 显示时完全不透明 */
    visibility: visible; /* 显示时可见 */
    transform: translateY(0); /* 动画到正常位置 */
}

.toast.hidden {
    /* 确保在隐藏时，不占用布局空间，并且动画逆向执行 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none; /* 隐藏时不允许鼠标事件 */
}

.toast-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    margin-left: auto; /* 推到右边 */
    padding: 0 5px;
}

/* 基础样式，适用于桌面 */
.toast {
    /* ... 现有样式 ... */
    max-width: 350px; /* 桌面端最大宽度 */
    left: auto; /* 默认靠右 */
    right: 20px;
}

/* 针对小屏幕设备的媒体查询 */
@media (max-width: 768px) {
    .toast {
        width: 90%; /* 手机和平板上占据90%宽度 */
        left: 50%; /* 居中 */
        right: auto;
        transform: translateX(-50%) translateY(20px); /* 居中并保持动画起始位置 */
        bottom: 15px; /* 手机上离底部稍微近一点 */
        padding: 10px 15px; /* 减小内边距 */
    }
    .toast.show {
        transform: translateX(-50%) translateY(0); /* 居中并动画到正常位置 */
    }
}

/* 进一步针对超小屏幕 */
@media (max-width: 480px) {
    .toast {
        font-size: 0.9em; /* 字体稍微小一点 */
        padding: 8px 12px;
    }
}

.toast {
    /* ... 其他样式 ... */
    opacity: 0;
    transition: opacity 0.3s ease-out; /* 关键：定义透明度过渡 */
}

.toast.show {
    opacity: 1;
}

.toast {
    /* ... 其他样式 ... */
    transform: translateY(20px); /* 初始位置：向下偏移20px */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* 同时过渡透明度和位移 */
}

.toast.show {
    opacity: 1;
    transform: translateY(0); /* 动画到正常位置 */
}

@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px); /* 稍微向上弹一点 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast.show {
    animation: slideInBounce 0.5s ease-out forwards; /* 应用动画 */
}

/* 隐藏动画也可以单独定义 */
@keyframes fadeOutSlideDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

.toast.hide { /* 假设JS会添加一个'hide'类来触发消失动画 */
    animation: fadeOutSlideDown 0.3s ease-in forwards;
    pointer-events: none; /* 动画期间不响应事件 */
}

<div id="myToast" class="toast hidden" role="status" aria-live="polite">
    <p>操作成功！您的设置已保存。</p>
    <button class="toast-close-btn">&times;</button>
</div>