CSS是前端開發中的重要一環，其中之一就是用CSS設計美觀的登錄界面。在設計登錄界面時，我們通常希望當某些條件觸發時，彈出一個登錄框，以提醒用戶進行登錄操作。下面，我們就來講解一下CSS實現登錄界面彈出的代碼。

// 彈出登錄框代碼
.login-form {
display: none; // 初始狀態下不顯示登錄框
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
padding: 20px;
}
.overlay {
display: none; // 初始狀態下不顯示遮罩層
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 9998;
}
// 觸發彈框的按鈕樣式
.btn-login {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
cursor: pointer;
}
// 點擊按鈕后顯示登錄框和遮罩層
.btn-login:hover + .overlay, .btn-login:focus + .overlay {
display: block;
}
.btn-login:hover + .overlay + .login-form, .btn-login:focus + .overlay + .login-form {
display: block;
}

在這段代碼中，我們首先定義了一個登錄框的樣式，它的display屬性為none，使其一開始是隱藏狀態。同時，我們定義了一個遮罩層也為隱藏狀態，當按鈕被點擊時，使用:hover和:focus偽類來分別控制遮罩層和登錄框的顯示。

通過這段代碼的實現，我們可以成功設計出一個簡單但美觀的CSS登錄界面，同時提高了用戶體驗的友好性。