本文共 3022 字，大约阅读时间需要 10 分钟。

������������������������������

��������������������������������������������������������������������������� ������������������������������

������������������������

���������������������������HTML���CSS���JavaScript���������������

������������������������

���������������������������������������

������������������������

���������������������������������������

������������������������������

������������������������������������������������

������������������

������������������������

CSS

@keyframes show {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes hide {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.toast_box {
    position: fixed;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: hide 1.5s;
}
 toast_box p {
     padding: 10px 20px;
     width: 300px;
     background: #f0f0f0;
     color: #000;
     border-radius: 4px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 }

JavaScript

function toast(text, time) {
    const toastBox = document.querySelector('.toast_box');
    const showToast = document.querySelector('#toast');
    
    showToast.textContent = text;
    toastBox.style.display = 'flex';
    toastBox.style.animation = 'show 1.5s';
    
    setTimeout(() => {
        toastBox.style.animation = 'hide 1.5s';
        setTimeout(() => {
            toastBox.style.display = 'none';
        }, 1400);
    }, time);
}
// ������������
function showSuccess() {
    toast('���������������', 2000);
}
function showWarning() {
    toast('���������������', 1500);
}
function showError() {
    toast('���������������!', 3000);
}

������������-notes

���������������������������������������������������������������������������������������������������������������������