CSS點擊彈出登錄是一種常見的設計模式，通過CSS使得用戶點擊某個元素，出現一個登錄框。下面我們來看一下如何實現這個效果。

html:
<div class="login-trigger">登錄</div>
<div class="login-box">
<form>
<input type="text" name="username" placeholder="請輸入用戶名">
<input type="password" name="password" placeholder="請輸入密碼">
<button type="submit">登錄</button>
</form>
</div>
css:
.login-box {
background: #fff;
border: 1px solid #ccc;
display: none;
position: absolute;
top: 30px;
right: 10px;
width: 200px;
padding: 10px;
}
.login-trigger:hover + .login-box,
.login-box:hover {
display: block;
}
js:
var loginTrigger = document.querySelector('.login-trigger');
loginTrigger.addEventListener('click', function() {
loginTrigger.nextElementSibling.style.display = 'block';
});

以上是一個簡單的CSS點擊彈出登錄框的實現方式。我們給登錄按鈕添加了一個click事件，當用戶點擊登錄按鈕時，登錄框就會彈出來。CSS樣式中我們將登錄框的display屬性設置為none，這樣登錄框一開始就會隱藏。在用戶點擊登錄按鈕時，我們將對應的登錄框的display屬性設置為block，這樣登錄框就會出現在頁面上。