CSS中的密碼眼睛功能是一種非常方便的交互效果。它可以讓用戶在輸入密碼時，在密碼框的右側顯示一個眼睛圖標，當用戶點擊眼睛圖標時，顯示明文密碼，再次點擊時，則顯示隱藏密碼。

input[type="password"]{
padding-right: 40px;
}
input[type="password"] + span{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
input[type="password"] + span:before{
content: '';
display: block;
border: solid transparent;
border-width: 0 0 2px 2px;
width: 10px;
height: 10px;
transform: rotate(45deg);
}
input[type="password"]:focus + span:before{
transform: rotate(-135deg);
margin-top: -3px;
margin-right: -1px;
border-color: #088eff;
}
input[type="password"][data-show]{
-webkit-text-security: none;
-moz-text-security: none;
-ms-text-security: none;
text-security: none;
}

在上述代碼中，使用了CSS選擇器來選中input類型為password的標簽，并使用padding-right屬性來留出眼睛圖標的位置。接著，創建了一個相鄰兄弟選擇器選中該密碼框后面的span標簽，并定義了該標簽的樣式，包括了位置、光標樣式和一個:before偽元素，通過transform和border來繪制出眼睛圖標。

在輸入框獲取焦點后，通過:focus的偽類選擇器來選中眼睛圖標的:before偽元素，并通過transform旋轉出現和隱藏密碼的效果，并更改border-color屬性來實現改變圖標顏色。

最后，當觸發點擊事件時，為密碼框添加了一個data-show屬性，并選擇了一個相應的屬性選擇器，使其顯示出密碼。

總之，CSS的密碼眼睛功能在網頁交互中是一個常用的效果，能夠提高用戶體驗，使輸入密碼的過程更直觀和安全。