轻提示
/* 轻提示 */
.toast_box {
/* width: 100%; */
position: sticky;
bottom: 80%;
left: 740px;
/* justify-content: center; */
z-index: 200;
transform: translate(-50%, -50%);
display: none;
}
.toast_box p {
box-sizing: border-box;
padding: 10px 20px;
width: max-content;
/* 提示框的背景色 */
background:
color:
font-size: 14px;
text-align: center;
border-radius: 6px;
opacity: 0.8;
}
<!-- 轻提示 -->
<div class="toast_box">
<p id="toast"></p>
</div>
// 轻提示
function toast(text, time) {
let toast = document.getElementById("toast");
let toast_box = document.getElementsByClassName("toast_box")[0];
toast.innerHTML = text;
toast_box.style.animation = "show 1.5s";
toast_box.style.display = "inline-block";
setTimeout(function () {
toast_box.style.animation = "hide 1.5s";
setTimeout(function () {
toast_box.style.display = "none";
}, 1400);
}, time);
}