CSS密碼框的眼睛是一種常用的交互效果，可以讓用戶隨時切換密碼框中的明文和密文顯示。這種效果基于CSS屬性的轉換和動畫，可以通過一些簡單的代碼實現。

/* 密碼框樣式 */
.input-password {
border: 1px solid #ccc;
padding: 5px;
font-size: 16px;
}
/* 密碼框眼睛樣式 */
.toggle-password {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin-left: -25px;
cursor: pointer;
}
/* 密碼框眼睛圖標 */
.toggle-password:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 5px;
border: solid #333;
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
/* 密碼框眼睛圖標-隱藏樣式 */
.toggle-password.hide:before {
width: 0;
height: 0;
border: none;
}
/* 密碼框眼睛圖標-旋轉動畫 */
.toggle-password.rotate:before {
transform: translate(-50%, -50%) rotate(-45deg);
}

以上是CSS樣式的代碼，接下來是實現效果的代碼：

// 獲取密碼框和眼睛圖標元素
const passwordInput = document.querySelector('.input-password');
const togglePassword = document.querySelector('.toggle-password');
// 點擊眼睛切換密碼框狀態
togglePassword.addEventListener('click', () =>{
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
togglePassword.classList.add('rotate');
} else {
passwordInput.type = 'password';
togglePassword.classList.remove('rotate');
}
});
// 鼠標移入移出切換眼睛圖標
togglePassword.addEventListener('mouseenter', () =>{
if (passwordInput.type === 'password') {
togglePassword.classList.remove('hide');
}
});
togglePassword.addEventListener('mouseleave', () =>{
togglePassword.classList.add('hide');
});

通過以上代碼，就可以實現一個簡單的密碼框眼睛效果了。