CSS手機端彈框具有良好的響應性和美觀的UI設計，非常適合在移動設備上展示提示信息和用戶操作確認彈出窗口。本文將介紹如何使用CSS代碼實現手機端彈框。

/* 彈框外框樣式 */
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 80%;
max-width: 400px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
text-align: center;
padding: 20px;
}
/* 彈框標題樣式 */
.popup h2 {
font-size: 1.2em;
font-weight: 600;
margin-top: 0;
color: #333;
}
/* 關閉按鈕樣式 */
.popup .close {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5em;
color: #999;
cursor: pointer;
}
/* 彈出動畫效果 */
.popup.active {
animation: fadeIn .3s ease-in-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate(-50%, -60%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}

上述CSS代碼實現了一個簡單的彈框框架，包括彈框外框、彈框標題、關閉按鈕等基本元素，并添加了彈出動畫效果。

為了使彈框顯示在頁面上，需要使用JavaScript來控制彈框的顯示與隱藏。代碼如下：

// 獲取彈框元素
var popup = document.querySelector('.popup');
// 獲取關閉按鈕元素
var closeBtn = document.querySelector('.close');
// 點擊關閉按鈕隱藏彈框
closeBtn.addEventListener('click', function() {
popup.classList.remove('active');
});
// 點擊頁面其它區域隱藏彈框
window.addEventListener('click', function(event) {
if (event.target === popup) {
popup.classList.remove('active');
}
});
// 顯示彈框
function showPopup() {
popup.classList.add('active');
}
// 調用showPopup函數顯示彈框
showPopup();

上述JavaScript代碼通過獲取彈框元素和關閉按鈕元素，設置點擊關閉按鈕和頁面其他區域隱藏彈框的事件監聽器，以及定義了顯示彈框的函數和調用函數的代碼。

通過組合上述CSS和JavaScript代碼，即可實現一個具有彈出動畫效果的并能在手機端完美展示的彈框效果。