CSS彈出登錄框是Web開發中常用的一種交互效果，它可以使網站的用戶登錄操作更加方便、快捷。下面我們將介紹如何使用CSS來實現一個彈出登錄框。

/* HTML部分 */
<div class="login-wrapper">
<a href="#" class="btn-login">登錄</a>
<div class="login-box">
<form>
<label>用戶名</label>
<input type="text" />
<label>密碼</label>
<input type="password" />
<button type="submit">登錄</button>
</form>
</div>
</div>
/* CSS部分 */
.login-wrapper {
position: relative;
}
.btn-login {
color: #fff;
background-color: #333;
padding: 10px;
border-radius: 5px;
}
.login-box {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #f1f1f1;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.login-box form {
display: flex;
flex-direction: column;
}
.login-box label {
margin-top: 10px;
font-weight: bold;
}
.login-box input {
padding: 5px;
border: none;
border-bottom: 1px solid #ddd;
}
.login-box button {
margin-top: 20px;
color: #fff;
background-color: #333;
padding: 10px;
border: none;
border-radius: 5px;
}
.btn-login:hover + .login-box,
.login-box:hover {
display: block;
}

首先，在HTML中我們創建一個包含登錄按鈕和登錄框的div容器，并在其中嵌套一個form表單用于輸入用戶名、密碼以及提交登錄信息。

然后，在CSS中我們為登錄按鈕.btn-login設置樣式，并創建.login-box類用于設置彈出的登錄框的樣式。在.login-box類中，我們使用display:none;隱藏登錄框，并為其設置了Position: absolute;使其從btn-login按鈕下方彈出。接下來，我們使用transform:translateX(-50%);將登錄框水平居中。此外，我們也為登錄框添加了Box-shadow效果，讓其在彈出時更具立體感。

最后，在CSS的最后我們為.btn-login:hover + .login-box以及.login-box:hover設置了display:block;的屬性，當我們鼠標懸停在.btn-login按鈕或是在.login-box上方時，login-box就會被顯示出來。

這樣，我們就成功地實現了一個彈出式的登錄框，來提高網站的用戶體驗。希望大家能夠在自己的網站制作中也能應用這一效果！