欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css手機提示框

錢衛國2年前9瀏覽0評論

CSS手機提示框是許多網站和應用程序中常見的元素之一。它們是指小的彈出框,通常用于顯示消息、警告、錯誤或其他相關信息,這些信息需要引起用戶的注意。

/*樣式代碼*/
.prompt-box {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: #ffffff;
border-radius: 4px;
padding: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
display: none;
}
.prompt-box p {
font-size: 14px;
color: #333333;
line-height: 20px;
margin: 0;
text-align: center;
}
.prompt-box.show {
display: block;
animation: showPrompt 0.3s;
}
@keyframes showPrompt {
from {
opacity: 0;
transform: translate(0, 20px);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}

以上是一些樣式代碼示例,用于創建一個基本的提示框。最外層是一個class為prompt-box的div,它使用了固定定位來放置在瀏覽器視口的底部。同時,我們還使用了一些其他的樣式屬性來加強這個提示框的樣式。

為了讓這個提示框能夠自動出現和消失,我們還需要添加一些javascript代碼:

//javascript代碼
function showPrompt(text) {
var promptBox = document.querySelector('.prompt-box');
promptBox.querySelector('p').textContent = text;
promptBox.classList.add('show');
setTimeout(function() {
promptBox.classList.remove('show');
}, 2000);
}

以上是一個簡單的javascript函數,使用它可以在提供文本時顯示提示框,并在2秒鐘后自動關閉提示框。我們首先找到了帶有.pormpt-box類的元素,然后將其中的p元素文本內容更改為傳遞的參數。接下來,我們添加一個名為show的類,這個類使用了CSS3的動畫屬性,并在2秒后再次刪除這個類,以實現自動關閉效果。

在完成這些基本設置之后,我們還可以在css和javascript代碼中進行更多的修改,以適應不同的設計和交互需求。當然,如果您使用的是一些現成的UI庫,它們可能已經為您提供了一些更豐富的手機提示框樣式和功能。“樣式只是模板,功能才是靈魂”,選擇適合自己應用的提示框樣式應該更符合實際應用需求。